如何根据数组映射的组件名称动态渲染对应React组件？

React.createElement的第一个参数如果传入字符串，React会将其识别为原生HTML标签名，你传入的SiFacebook是第三方组件的变量名而非原生标签，直接传字符串会被渲染成无效的自定义HTML标签<sifacebook></sifacebook>，自然无法正常显示图标。

推荐使用手动图标映射表的方式实现，性能更稳定、打包体积可控：

1. 先引入所有需要用到的React Icons组件，建立字符串到组件的映射关系：

import { SiFacebook, SiTwitter, SiGithub /* 其他你用到的图标 */ } from 'react-icons/si'

const IconMap = {
  SiFacebook,
  SiTwitter,
  SiGithub,
  // 其他图标依次添加
}

2. 修改遍历渲染的代码，直接从映射表中取组件实例使用：

{links.map((link, index) => (
  <li
    key={index}
    className="w-60 rounded-md bg-neutral-focus grid grid-cols-1 p-3 mx-2"
  >
    {/* 两种写法都可以，选你习惯的即可 */}
    <IconMap[link.icon] />
    {/* 或者 React.createElement(IconMap[link.icon], {}) */}
    <a
      href={link.url}
      target="_blank"
      rel="noreferrer"
      className="text-sm font-bold"
    >
      {link.name}
    </a>
  </li>
))}

如果你的图标数量极多，不想手动引入，可以选择动态导入方案，但会增加打包体积和首屏加载成本，不优先推荐。

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