Masalah yang dihadapi dengan import dinamik ikon UI Bahan Bertindak balas

Question

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

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

Ikon const = ({ iconName }) => {
        kembalikan <div>{MuiIcons[iconName]}</div>;
};

eksport Ikon lalai;

但是我得到了以下错误：

react-dom.development.js:14887 Ralat Tidak Ditangkap: Objek tidak sah sebagai anak React (ditemui: objek dengan kunci {$$typeof, type, bandingkan}). Jika anda ingin membuat koleksi kanak-kanak, gunakan tatasusunan sebaliknya.
    di throwOnInvalidObjectType (react-dom.development.js:14887:9)
    di reconcileChildFibers2 (react-dom.development.js:15828:7)
    di reconcileChildren (react-dom.development.js:19167:28)
    di updateHostComponent (react-dom.development.js:19924:3)
    di beginWork (react-dom.development.js:21618:14)
    di HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    di Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    di invokeGuardedCallback (react-dom.development.js:4277:31)
    di beginWork$1 (react-dom.development.js:27451:7)
    di performUnitOfWork (react-dom.development.js:26557:12)

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

Answer 1

Anda mengimport objek bukan komponen React.

Untuk menggunakannya dengan cara ini, anda lakukan ini:

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