如何从对象属性中检索 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都未定义，并且我收到以下错误：

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

检查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"

您还需要删除默认分配并有条件地呈现图标，因为这会在没有图标时引发错误

const { icon: ItemIcon } = item

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