如何从React-Icon名称数组创建JSX元素？

直接用字符串作为JSX标签名是无效的，React会将其视为自定义HTML标签而非导入的图标组件。以下是两种可行的实现方式：

方法一：组件映射表（推荐固定图标列表场景） #

先创建一个组件名称与实际组件引用的映射对象，通过数组中的字符串名称匹配对应的组件，再渲染为JSX元素：

import React from "react";
// 按需导入需要用到的图标组件
import { GiCard2Spades, GiCard3Spades, GiCard8Spades, GiCard9Spades } from "react-icons/gi";

// 建立图标名称到组件的映射
const iconMap = {
  GiCard2Spades,
  GiCard3Spades,
  GiCard8Spades,
  GiCard9Spades
};

const IconList = () => {
  const iconNames = ["GiCard8Spades", "GiCard9Spades"];
  
  const iconElements = iconNames.map(name => {
    const Icon = iconMap[name];
    // 避免因名称错误导致渲染失败
    if (!Icon) return null;
    // 必须添加key属性符合React列表渲染规范
    return <Icon key={name} />;
  });

  return <div>{iconElements}</div>;
};

export default IconList;

这种方式的优势是打包体积小（仅导入用到的组件），渲染性能高，适合图标列表固定的场景。

方法二：动态导入（适合动态图标场景） #

如果图标名称是动态生成的，或者需要加载大量图标，可以使用动态导入的方式，异步加载对应的图标组件：

import React, { useState, useEffect } from "react";

const IconList = () => {
  const iconNames = ["GiCard8Spades", "GiCard9Spades"];
  const [iconElements, setIconElements] = useState([]);

  useEffect(() => {
    const loadIcons = async () => {
      // 批量异步加载图标组件
      const loadedComponents = await Promise.all(
        iconNames.map(async name => {
          try {
            // 动态导入react-icons/gi模块，取出对应组件
            const giIcons = await import("react-icons/gi");
            return giIcons[name];
          } catch (err) {
            console.error(`加载图标${name}失败:`, err);
            return null;
          }
        })
      );

      // 转换为JSX元素数组
      setIconElements(
        loadedComponents.map((Icon, index) => {
          if (!Icon) return null;
          return <Icon key={iconNames[index]} />;
        })
      );
    };

    loadIcons();
  }, []);

  return <div>{iconElements}</div>;
};

export default IconList;

注意：动态导入会将整个react-icons/gi模块打包进项目，可能导致打包体积增大，非必要场景优先使用第一种方法。

额外注意事项 #

• 确保数组中的图标名称与react-icons导出的名称完全一致（比如你代码中的GiCard9Spade少了末尾的s，应该改为GiCard9Spades）
• 列表渲染时必须添加key属性，避免React警告

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