React Material UI图标的动态导入遇到问题
<p>你好，我正在尝试从mui动态加载图标，以下是代码：</p>
<pre class="brush:php;toolbar:false;">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;</pre>
<p>但是我得到了以下错误：</p>
<pre class="brush:php;toolbar:false;">react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, 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)</pre>
<p>有任何解决办法吗？提前谢谢你。</p>
1
868
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
您正在导入一个对象而不是一个React组件。
要以这种方式使用它，您可以这样做：
const Icon = ({ iconName }) => { const Icon = MuiIcons[iconName] return <Icon /> }