React中如何切换MUI ListItemIcon的显示与隐藏

核心思路 #

你的四个文件夹名称（Inbox、Sent Items、Deleted Items、Archieve）本身就是唯一的，完全可以直接用文件夹名称作为区分每个项的唯一标识，不用额外加ID字段。通过维护一个“已星标文件夹”的状态集合，就能实现点击切换图标的显示/隐藏。

具体实现步骤 #

1. 初始化星标状态
   用useState创建一个Set来存储已星标的文件夹名称（用Set比数组更高效做存在性判断）：

import { useState } from 'react';
// 导入所需的Material-UI组件（如List、ListItem、StarBorderIcon等）

const FolderList = () => {
  // 存储已星标的文件夹名称
  const [starredFolders, setStarredFolders] = useState(new Set<string>());
  // ...后续逻辑
};

2. 编写切换星标的逻辑
   写一个函数，接收文件夹名称，切换它在星标集合中的存在状态：

const toggleStar = (folderName: string) => {
  setStarredFolders(prevState => {
    const updatedSet = new Set(prevState);
    // 存在则移除，不存在则添加
    updatedSet.has(folderName) ? updatedSet.delete(folderName) : updatedSet.add(folderName);
    return updatedSet;
  });
};

3. 渲染列表时动态控制图标显示
   遍历文件夹列表，用文件夹名称作为key（符合React的key要求），点击列表项时触发toggleStar，并根据是否在星标集合中决定显示StarBorder图标：

<List>
  {["Inbox", "Sent Items", "Deleted Items", "Archieve"].map(folder => (
    <ListItem button key={folder} onClick={() => toggleStar(folder)}>
      {/* 仅已星标的文件夹显示图标 */}
      {starredFolders.has(folder) && <StarBorderIcon />}
      <ListItemText primary={folder} />
    </ListItem>
  ))}
</List>

额外说明 #

• 如果后续文件夹列表可能出现名称重复的情况，再给每个项手动添加唯一ID（比如{name: 'Inbox', id: 'inbox-01'}）即可，但当前场景用名称完全足够。
• 选用Set而非数组的原因：判断某个文件夹是否已星标时，Set.has()是O(1)时间复杂度，比数组的includes()（O(n)）更高效，尤其是列表项较多时。

内容的提问来源于stack exchange，提问作者walee