如何在React TSX中渲染JSON指定的react-icons组件？

我有一个包含iconCards列表的JSON文件，每个iconCard的icon字段存储了需要显示的react-icons组件名称。在React TSX组件中循环渲染这些卡片时，直接使用<Item.icon/>无法正确渲染图标。此前在TypeScript文件中通过ReactIcon类型可实现该功能，但为了搭建多语言页面，希望采用JSON管理数据，现寻求可行解决方案。

相关代码 #

JSON文件 #

{
    "input": {
        "placeholder": "Paste in your individual video url here..."
    },
    "button": {
        "text": "Download video"
    },
    "iconCards": [
        {
            "icon": "BsEmojiHeartEyes",
            "title": "Free to use",
            "description": "Our website offers a free way to download Instagram videos. No registration or sign-up is required. Enter the URL of the video you wish to download and click the 'Download' button."
        },
        {
            "icon": "BsStopwatch",
            "title": "Fast download speeds",
            "description": "Our Instagram video downloader website offers fast download speeds so you can quickly and easily download your favourite videos."
        },
        {
            "icon": "GrUserExpert",
            "title": "Download in HD",
            "description": "Our Instagram video downloader allows you to download videos in high definition, so you can enjoy your favourite videos in the best quality possible."
        },
        {
            "icon": "AiOutlineVideoCamera",
            "title": "No Download Limits",
            "description": "Our Instagram video downloader has no download limits, so you can download as many videos as you want!"
        },
        {
            "icon": "GrUserExpert",
            "title": "Fully Secured",
            "description": "Our website is fully secured with the latest security features. Your data is safe with us. We use the latest encryption technology to protect your data."
        },
        {
            "icon": "GrUserExpert",
            "title": "Mp4 format",
            "description": "Our website offers the ability to download Instagram videos in MP4 format. This popular video format is widely compatible with many devices and media players."
        }
    ],
    "sections": [
        {
            "title": "Instagram Video-Download",
            "description": {
                "paragraphs": [
                    "Our website is the best place to download Instagram videos. With our simple and easy-to-use interface, you can download videos from Instagram in just a few clicks. We offer high-quality videos optimized for all devices so that you can enjoy your videos on any device."
                ]
            }
        },
        {
            "title": "About Instagram Video Downloader?",
            "description": {
                "paragraphs": [
                    "If you are looking for a website that will allow you to download videos from Instagram, then you are in the right place. This website is straightforward to use, and it is entirely free. Enter the URL of the Instagram video you want to download and click on the download button. You can save the video to your device within seconds."
                ]
            }
        },
        {
            "title": "How to Download Instagram Videos?",
            "description": {
                "paragraphs": [
                    "By visiting this page, your purpose is to download an Instagram video and save it to your device. Since Instagram doesn't offer a download option, we're here to help you.",
                    "1) Simply enter the Instagram video URL of your choice, and click on the Download button.",
                    "2) Our servers will start fetching the video and provide you with a preview option and a download button to start downloading the video.",
                    "By hitting the download button, you can save it to your device in MP4 format."
                ]
            }
        }
    ],
    "faqs": {
        "heading": "FAQs for Instagram Video Downloader",
        "items": [
            {
                "question": "Can we download reels or IGTV videos from this tool?",
                "answer": "This website supports all kinds of Instagram video downloading, whether it be Instagram video, Instagram reels or IGTV video. "
            },
            {
                "question": "Is it legal to download videos from Instagram?",
                "answer": "Yes, it is legal to download videos from Instagram. However, you should only download videos that you have the rights to. If you download a video you do not have the right to, you could infringe on copyright laws."
            },
            {
                "question": "How to download video from Instagram?",
                "answer": "Our website solves the same purpose. All you need is Instagram video URL to download it."
            },
            {
                "question": "How to download a video from Instagram with audio?",
                "answer": "Our website downloads the video with audio only. If you wish to download only audio from Instagram videos, you can check out Instagram audio downloader page."
            }
        ]
    },
    "headings": {
        "h1": "Instagram Video Downloader",
        "h1Paragraph": "Download Instagram videos and save them to your device.",
        "h2": "Instagram Video Downloader Features",
        "h2Paragraph": "List of top features"
    }
}

TSX代码片段 #

<UL>
  {content.iconCards.map((Item, index) => (
    <LI key={index}>
      <>
       <Item.icon/> {/* 如何渲染？ */}
        <h3 className="font-bold">{Item.title}</h3>
        <p>{Item.description}</p>
      </>
    </LI>
  ))}
</UL>

TypeScript接口 #

interface PageProps {
  input: {
    placeholder: string
  }
  button: {
    text: string
  }
  iconCards: {
    icon: React.ReactNode
    title: string
    description: string
  }[]
  sections: {
    title: string
    description: { paragraphs: string[] }
  }[]
  faqs: {
    heading: string
    items: {
      question: string
      answer: string
    }[]
  }
  headings: {
    h1: string
    h1Paragraph: string
    h2: string
    h2Paragraph: string
  }
}

核心思路是创建图标映射表，将JSON中的组件名字符串关联到实际导入的react-icons组件，再通过该映射表动态渲染图标。

1. 导入图标并创建映射表 #

先按需导入需要用到的react-icons组件，再创建对象将JSON中的字符串与组件一一对应：

import { BsEmojiHeartEyes, BsStopwatch } from "react-icons/bs";
import { GrUserExpert } from "react-icons/gr";
import { AiOutlineVideoCamera } from "react-icons/ai";

// 图标映射表：键为JSON中的图标名称，值为对应的组件
const iconMap = {
  BsEmojiHeartEyes,
  BsStopwatch,
  GrUserExpert,
  AiOutlineVideoCamera,
  // 后续新增图标直接在此添加
};

2. 修正TypeScript接口类型 #

将icon字段类型改为映射表的键类型，确保类型安全，避免无效的图标名称：

interface PageProps {
  input: {
    placeholder: string;
  };
  button: {
    text: string;
  };
  iconCards: {
    icon: keyof typeof iconMap; // 限制为映射表中存在的键
    title: string;
    description: string;
  }[];
  sections: {
    title: string;
    description: { paragraphs: string[] };
  }[];
  faqs: {
    heading: string;
    items: {
      question: string;
      answer: string;
    }[];
  };
  headings: {
    h1: string;
    h1Paragraph: string;
    h2: string;
    h2Paragraph: string;
  };
}

3. 动态渲染图标 #

从映射表中取出对应组件（注意组件名必须大写开头，符合React要求），然后渲染：

<UL>
  {content.iconCards.map((item, index) => {
    const IconComponent = iconMap[item.icon];
    return (
      <LI key={index}>
        <>
          {/* 组件存在时再渲染，避免报错 */}
          {IconComponent && <IconComponent />}
          <h3 className="font-bold">{item.title}</h3>
          <p>{item.description}</p>
        </>
      </LI>
    );
  })}
</UL>

补充说明 #

• 该方案既保留了JSON管理多语言数据的便利性，又通过TypeScript类型检查避免了无效图标名称。
• 后续新增图标只需两步：导入新组件、在iconMap中添加映射，JSON中直接使用对应名称即可。

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