我正在尝试使用React.Createelement动态创建MUI图标。但是，反应降低了元素。有办法保留案件吗？

Question

我正在从JSON获得Service.icon，所以看起来

[
  {
    "icon": "AdminPanelSettingsIcon",
  }
]

我正在使用React.Createlement（），就像这样，

data.map((service) => {
  let icon = React.createElement(
    service.icon, 
    { key: service.icon }, 
    null);
});

我的输出是＆lt; adminpanelsettingsicon＆gt;＆gt;/adminpanelsettingsicon＆gt;

无论如何都在那里保留情况，或转换为pascalcase，以便呈现So ＆lt; adminpanelsettingsicon＆gt;＆lt;＆lt;/adminpanelsettingsicon＆gt;

注意：无论如何，无论如何，无论如何，无论如何都可以动态地显示基于指定的json aka api api api api呼叫。

Answer 1

update ：

如果您使用https://www.npmjs.com/package/package/@material-ui/icons（或任何其他库），则可以动态导入所有在这样的组件中：

//Preparing, it should run inside async function
let maps = {}
let listIcon = [];
await import('@material-ui/icons').then(res => {
      listIcon = res
})

for(let icon of listIcon){
    maps[icon.constructor.name.toLowerCase()] = icon;
}

//Render
data.map((service) => {
    const component = maps[service.icon] || DefaultComponent;
    let icon = React.createElement(
        component,
        { key: component },
        null);
});

原始答案：

如果API输出是可预测的（service.icon只是您定义的组件的一个组件），

则可以做到这一点

//Import...

//Defined maps
const maps = {
    "adminpanelsettingsicon": AdminPanelSettingsIcon,
    "adminpanelsettingsicon2": AdminPanelSettingsIcon2,
    "adminpanelsettingsicon3": AdminPanelSettingsIcon3,
}

//Render
data.map((service) => {
    const component = maps[service.icon] || DefaultComponent;
    let icon = React.createElement(
        component,
        { key: component },
        null);
});

：随心所欲

Answer 2

简单的方法要执行此操作，

在您的.jsx文件中：

import Icon from '@mui/material/Icon';

export default function MyComponent() {
  const iconName = `home`
  return (<Icon>{iconName}</Icon>);
}

作为先决条件，您必须在yout index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

voilà中包含此行！

来源：

• mui doc

Answer 3

docs 指定：

React.createElement(
  type,
  [props],
  [...children]
)

类型参数可以是标签名称字符串（例如'div'或
“跨度”），一种反应组件类型（类或函数）或React
片段类型。

您正在尝试使用字符串“ AdminPanelSettingsicon”创建一个元素。取而代之的是，您应该通过上课来尝试此操作：

React.createElement(AdminPanelSettingsIcon)

您可以通过将列表转换为使用类作为值来做到这一点：

[
  {
    // The value is a class now, not a string
    "icon": AdminPanelSettingsIcon,
  }
]