循环使用tsx组件名称的对象列表(JSON文件)，并在React (TypeScript)中呈现它-- JSON中引用的呈现反应图标，如何实现？

Question

我有一个带有iconCards列表的JSON文件，其中每个iconCard都有一个属性icon。此属性包含要显示的反应性图标组件的名称。

我的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/> <-- How to render it?
          <h3 className="font-bold">{Item.title}</h3>
          <p>{Item.description}</p>
        </>
      </LI>
    ))}
  </UL>

我的界面：

    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
  }
}

我在一个TypeScript文件中实现了这一点，在该文件中我可以将图标键入为ReactIcon。但是，我想构建一个多语言的页面，为此，我想JSON文件会更好。谢谢!

Answer 1

您可以在一个组件中导入分离图标文件夹并相应地映射它。

import * as ReactIconAI from "react-icons/ai";
import * as ReactIconGR from "react-icons/gr";
import * as ReactIconBS from "react-icons/bs";

const ReactIcon = ({ icons }) => {
    const iconFolder = icons.slice(0, 2).toLowerCase();
    // Map Icon to Respective Folder by comparing the First two Character of the 
    //Icons
    let icon =
      iconFolder === "ai"
        ? ReactIconAI[icons]
        : iconFolder === "bs"
        ? ReactIconBS[icons]
        : iconFolder === "gr"
        ? ReactIconGR[icons]
        : "";
    // return only if the icon Exist
    return icon && React.createElement(icon);
  };

通过使用上面的组件，您可以通过json映射。

return (
    <>
      {content.iconCards.map((Item, index) => (
        <>
          <h3 className="font-bold">{Item.title}</h3>
          <p>{Item.description}</p>
          <ReactIcon icons={Item.icon} />
        </>
      ))}
    </>
  );