React Material UI圖示的動態導入遇到問題

Question

你好，我正在嘗試從mui動態加載圖標，以下是代碼：

import React from "react";
import * as MuiIcons from "@mui/icons-material";
console.log("MuiIcons: ", MuiIcons);

const Icon = ({ iconName }) => {
        return <div>{MuiIcons[iconName]}</div>;
};

export default Icon;

但我得到了以下錯誤：

react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$type, type, compare}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:14887:9)
    at reconcileChildFibers2 (react-dom.development.js:15828:7)
    at reconcileChildren (react-dom.development.js:19167:28)
    at updateHostComponent (react-dom.development.js:19924:3)
    at beginWork (react-dom.development.js:21618:14)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)

有解決方法嗎？提前謝謝你。

Answer 1

您正在匯入一個物件而不是一個React元件。

要以這種方式使用它，您可以這樣做：

const Icon = ({ iconName }) => {
  const Icon = MuiIcons[iconName]
  return <Icon />
}