如何从对象中检索 React 组件 属性

Question

我有一个 SliderMenu React 组件，它接收一个包含其元素的数组。这些元素是对象，它们的属性之一是将在菜单中显示的图标：

function SliderMenu({ options }) {
  return (
    <>
      <Drawer open>
        <List>
          {options.map((item) => {
            const { icon: ItemIcon } = item || {};
            return (
              <ListItem button key={`menuItem_${item.text.replace(/\s/g, '')}`}>
                <ListItemIcon>
                  <ItemIcon />
                </ListItemIcon>
                <ListItemText primary={item.text} />
              </ListItem>
            );
          })}
        </List>
      </Drawer>
    </>
  );
}

这个组件是从上层组件调用的（因为我希望能够创建多个 SliderMenu 如果我需要的话），它指定了元素数组并将它们作为道具传递：

import React from 'react';
import { HomeRoundedIcon } from '@material-ui/icons/HomeRounded';
import SliderMenu from '../../components/SliderMenu';

function MainMenu() {
  const menuOptions = [
    {
      text: 'Home',
      icon: HomeRoundedIcon,
    },
  ];

  return (
    <SliderMenu options={menuOptions} />
  );
}

export default MainMenu;

这里的问题是每当我尝试这段代码时，ItemIcon 是未定义的，我收到以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of SliderMenu.

但是，如果我尝试：

const menuOptions = [
    {
        text: 'Home',
        icon: <HomeRoundedIcon />,
    },
];

ItemIcon 有一个值，我得到以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of SliderMenu.

我希望能够根据上下文指定具有不同图标等的不同菜单元素，然后使用公共组件来呈现它并在所有菜单中具有一致的行为。

如何使用图标组件库在对象中定义图标，然后通过 props 将其传递给 SliderMenu 以便它可以渲染它（无需导入所有图标并进行切换以查看必须呈现哪个图标）?

Answer 1

将导入更改为默认导入

import HomeRoundedIcon from '@material-ui/icons/HomeRounded'

或使用来自 @material-ui/icons 路径的命名导入

import { HomeRounded as HomeRoundedIcon } from "@material-ui/icons"

您还希望删除默认分配并有条件地呈现图标，因为这会在没有图标时抛出错误

const { icon: ItemIcon } = item

{ItemIcon && (
  <ListItemIcon>
    <ItemIcon />
  </ListItemIcon>
)}