React Material UI 아이콘을 동적으로 가져올 때 발생하는 문제

Question

你好，我尝试从mui动态加载图标，以下是代码：

"react"에서 React 가져오기;;
*를 "@mui/icons-material"에서 MuiIcon으로 가져옵니다;;
console.log("MuiIcons: ", MuiIcons);

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

기본 아이콘 내보내기;

但是我得到了以下错误：

react-dom.development.js:14887 포착되지 않은 오류: 객체가 React 하위로 유효하지 않습니다(발견: 키가 {$$typeof, type, 비교하다}). 하위 컬렉션을 렌더링하려면 대신 배열을 사용하세요.
    throwOnInvalidObjectType(react-dom.development.js:14887:9)에서
    reconcileChildFibers2에서 (react-dom.development.js:15828:7)
    reconcileChildren에서 (react-dom.development.js:19167:28)
    updateHostComponent에서 (react-dom.development.js:19924:3)
    BeginWork에서 (react-dom.development.js:21618:14)
    HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    InvokeGuardedCallback에서 (react-dom.development.js:4277:31)
    BeginWork$1(react-dom.development.js:27451:7)에 있습니다.
    PerformUnitOfWork(react-dom.development.js:26557:12)

有任何解决办法吗?提前谢谢你。

Answer 1

React 구성 요소가 아닌 개체를 가져오고 있습니다.

이 방법을 사용하려면 다음을 수행하세요.

으아악