如何从对象属性检索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，它指定了元素数组并将它们作为prop传递：

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都未定义，并且我收到以下错误：

错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义的文件中导出组件，或者可能混淆了默认导入和命名导入。

检查SliderMenu的渲染方法。

但是，如果我尝试：

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

ItemIcon有一个值，并且出现以下错误：

错误：元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

检查SliderMenu的渲染方法。

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

我如何使用图标组件库在对象中定义图标，然后将其通过props传递到SliderMenu，以便它可以呈现它]（无需导入所有图标并制作开关以查看必须渲染哪个图标）？

Answer 1

将您的导入更改为默认导入

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

或使用@material-ui/icons中的命名导入>

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