Beim dynamischen Import von React Material-UI-Symbolen sind Probleme aufgetreten

Question

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

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

Standardsymbol exportieren;

但是我得到了以下错误:

react-dom.development.js:14887 Nicht abgefangener Fehler: Objekte sind nicht als React-Kind gültig (gefunden: Objekt mit Schlüsseln {$$typeof, type, vergleichen}). Wenn Sie eine Sammlung untergeordneter Elemente rendern möchten, verwenden Sie stattdessen ein Array.
    bei throwOnInvalidObjectType (react-dom.development.js:14887:9)
    bei reconcileChildFibers2 (react-dom.development.js:15828:7)
    bei reconcileChildren (react-dom.development.js:19167:28)
    bei updateHostComponent (react-dom.development.js:19924:3)
    bei beginWork (react-dom.development.js:21618:14)
    bei HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    bei Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    bei invokeGuardedCallback (react-dom.development.js:4277:31)
    bei beginWork$1 (react-dom.development.js:27451:7)
    bei performUnitOfWork (react-dom.development.js:26557:12)

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

Answer 1

您正在导入一个对象而不是一个React组件。

要以这种方式使用它，您可以这样做：

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