reactjs - 我正在尝试使用 React.createElement 动态创建 Mui 图标。但是，React 会将该元素小写。有办法保留案例吗？

Question

我从 JSON 获取 service.icon，所以它看起来像这样

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

我像这样使用 React.createElement() ，

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

我的输出是<adminpanelsettingsicon></adminpanelsettingsicon>

是否有办法保留大小写，或转换为 PascalCase，以便它呈现如下 <AdminPanelSettingsIcon></AdminPanelSettingsIcon>

注意:是否有基于指定 JSON 又名 api 调用动态显示 mui 图标的方法。

Answer 1

docs指定:

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

The type argument can be either a tag name string (such as 'div' or 'span'), a React component type (a class or a function), or a React fragment type.

您正在尝试使用字符串“AdminPanelSettingsIcon”创建一个元素。相反，您应该通过传入类来尝试此操作:

React.createElement(AdminPanelSettingsIcon)

您可以通过将列表转换为使用类作为值来完成此操作:

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