动态加载Material UI图标报错：React子元素无效问题求助

问题根源是你直接将图标组件对象作为React子元素渲染，而没有将它实例化为JSX元素。MUI图标本质是React组件，必须以<组件名 />的形式渲染，而非直接引用组件本身。

修正后的代码 #

import React from "react";
import * as MuiIcons from "@mui/icons-material";

const Icon = ({ iconName }) => {
  // 获取对应的图标组件
  const IconComponent = MuiIcons[iconName];
  
  // 容错处理：避免传入不存在的图标名称导致报错
  if (!IconComponent) {
    return <div>无效图标</div>;
  }

  // 实例化组件并渲染
  return <div><IconComponent /></div>;
};

export default Icon;

代码说明 #

1. MuiIcons[iconName]获取到的是React组件的定义（类或函数），并非可直接渲染的元素
2. 通过<IconComponent />的语法，将组件实例化为React可识别的渲染节点
3. 增加了图标存在性检查，提升代码健壮性

使用示例 #

// 渲染Home图标
<Icon iconName="Home" />
// 渲染Settings图标
<Icon iconName="Settings" />

内容的提问来源于stack exchange，提问作者ABIDI MarWen