React如何正确渲染数组配置中存储的动态图标组件

直接选下面任意一种写法就行，都能正常渲染动态图标。

写法1：不用包装函数，直接渲染 #

这是最省事的写法，根本不需要单独写DynamicComponent，注意React要求组件变量必须首字母大写，JSX才会把它当组件而不是原生HTML标签解析：

{menus.map(menu => {
  const Icon = menu.icon
  return (
    <li key={menu.to}>
      {/* 记得给图标传尺寸，heroicons默认尺寸为0，不设大小看不见 */}
      <Icon className="w-6 h-6" />
    </li>
  )
})}

写法2：保留动态包装组件，修正传参逻辑 #

如果一定要抽离动态组件的逻辑，记住两个规则：自定义组件在JSX里要用标签形式写，组件接收的第一个参数是props对象，不要直接传组件引用。
修正后代码：

// 动态组件从props里取待渲染的组件，透传其余属性
const DynamicComponent = ({ component: Component, ...iconProps }) => <Component {...iconProps} />

// 渲染时用标签形式传参
{menus.map(menu => (
  <li key={menu.to}>
    <DynamicComponent component={menu.icon} className="w-6 h-6" />
  </li>
))}

你之前的写法踩了两个React组件渲染的基础坑：

• 直接在插值括号{}里调用DynamicComponent(menu.icon)，属于普通函数调用，会绕过React的组件类型校验、生命周期绑定逻辑，哪怕是无状态的图标组件，也可能因为元素类型识别失败无法正常挂载
• 如果你之前试过改成标签形式<DynamicComponent icon={menu.icon} />，那你原来定义的DynamicComponent会把整个props对象当成要渲染的组件，React无法解析普通对象为组件，自然不会输出任何内容

补充提醒：Heroicons 所有版本的组件都不会自带默认尺寸，必须手动传入宽高属性或者对应样式类，否则渲染出来的SVG宽高为0，视觉上和没渲染一样。

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