如何在JavaScript菜单对象中正确引用React MUI图标组件？

你遇到的语法错误是因为在JS对象里直接写了JSX渲染语法</InboxIcon>，这不符合JavaScript语法规则。正确的做法是直接存储图标组件的引用，而非渲染后的JSX元素。

步骤1：正确定义菜单数据对象 #

首先确保你已经导入了需要的MUI图标组件，然后在menuItems里将icon字段设为组件本身（不带尖括号）：

// 先导入图标组件
import InboxIcon from '@mui/icons-material/Inbox';
// 其他需要的图标同理导入

const menuItems = {
  Text: [
    { name: 'TTS', path: 'textTTS', icon: InboxIcon, enabled: true },
  ],
  Image: [...],
  Video: [...],
  Live: [...],
};

步骤2：修改菜单渲染逻辑 #

在渲染ListItemIcon的时候，把存储的组件引用当作React组件来渲染（加上尖括号）：

let menuComponents = Object.keys(menuItems).map((header) => {
  return (
    <List
      key={header}
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          {header}
        </ListSubheader>
      }
    >
      {menuItems[header].map((item) => {
        const IconComponent = item.icon; // 取出组件引用
        return (
          <ListItem
            key={item.path}
            disablePadding
            sx={{ display: 'block' }}
            onClick={() => {
              navigate(item.path);
            }}
          >
            <ListItemButton disabled={!item.enabled}>
              <ListItemIcon>
                {/* 渲染图标组件 */}
                <IconComponent />
              </ListItemIcon>
              <ListItemText primary={item.name} />
            </ListItemButton>
          </ListItem>
        );
      })}
    </List>
  );
});

原理说明 #

React组件本质是JavaScript函数或类，把组件引用存在对象里和存普通函数引用一样，是合法的JS操作。之后在JSX中用<IconComponent />的方式调用，才会触发组件的渲染，这完全符合React的组件使用逻辑，也不会触发语法错误。

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