如何從對象屬性中檢索 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>
)}