React マテリアル UI アイコンの動的インポートで発生した問題

Question

こんにちは、mui からアイコンを動的にロードしようとしています。コードは次のとおりです:

React を "react" からインポートします;
import * as MuiIcons from "@mui/icons-material";
console.log("MuiIcons: ", MuiIcons);

const Icon = ({ 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 コンポーネントではなくオブジェクトをインポートしています。

このように使用するには、次のようにします:

リーリー