React:如何使用fetch API显示react图标元素？

Question

我将我的社交链接数据存储在firebase上，现在我想创建一个<li>列表，列出我的社交链接，但是这里的icon对象不是给我显示图标，而是向我显示元素，比如：<BsBehance />。它应该显示为图标，我怎么做呢？

火基数据：-

​

​

代码：-

import { useEffect, useState } from "react";
import * as ReactIcons from "react-icons/fa";
import MainWrapper from "./MainWrapper";
import classes from "./pages.module.css";

export default function Footer() {
    const [socialLinks, setSocialLinks] = useState([]);

    useEffect(() => {
        const fetchSocilLinks = async () => {
            const res = await fetch(
                "https://mohitdevelops-d64e5-default-rtdb.asia-southeast1.firebasedatabase.app/accounts.json"
            );
            const data = await res.json();
            let loadedData = [];
            for (const keys in data) {
                loadedData.push({
                    url: data[keys].url,
                    icon: data[keys].icon,
                    id: data[keys].id,
                });
            }
            setSocialLinks(loadedData);
        };
        fetchSocilLinks().catch((err) => {
            console.log(err.message);
        });
    }, [socialLinks]);

    console.log(socialLinks);

    return (
        <footer className={classes.footer__wrap}>
            <MainWrapper>
                <p>Connect with me:</p>
                <ul className={classes.social_links}>
                    {socialLinks?.map(({ icon, id, url }) => {
                        const iconLink = icon.split(/\<|\/>/).filter((e) => e)[0];
                        const IconsComponent = ReactIcons[iconLink];
                        return (
                            <li key={id}>
                                <a href={url} target="_blank">
                                    <IconsComponent />
                                </a>
                            </li>
                        );
                    })}
                </ul>                   
            </MainWrapper>
        </footer>
    );
}

它像这样向我展示：-

​

​

所有的数据都很好，只是需要知道如何显示一个像图标一样工作的元素。

Answer 1

因为el.icon是一个字符串，所以它被显示为一个字符串。如果要基于该动态字符串呈现组件，则需要有一个对象，其中键名是从服务器获得的字符串。而这个值，可以是组件本身。

当您在{}中插入字符串时，render将将其呈现为字符串，即使它们是< />格式的。

而且，尽量不要使用dangerouslySetInnerHTML，因为它有很高的安全性问题。

这是一个码箱，为您的上述情况。请检查这个：

Answer 2

您需要像这样使用dangerouslySetInnerHTML

<ul className={classes.social_links}>       
       {socialLinks.map((el) => {
            return (
                <li key={el.id}>
                    <a href={el.url} target="_blank">
    <span dangerouslySetInnerHTML={{__html: el.icon}} />
                    </a>
                </li>
            );
        })}
</ul>

Answer 3

需要显示的图标应该是从react.js图标/bs导入的，该图标名来自于火基数据，因此可以在react.js中使用动态导入导入它，但是对于动态导入，您需要分别处理加载，但是我提供了简单的方法。

需要安装react图标

npm install react-icons --save

然后导入所有图标

import * as ReactIcons from "react-icons/bs";

并添加这一行代码

  <ul>
    {socialLinks?.map(({ icon, id, url }) => {
      const iconLink = icon.split(/\<|\/>/).filter((e) => e)[0];
      const Compoenent = ReactIcons[iconLink];
      return (
        <li key={id}>
          <a href={url}>
            <Compoenent />
          </a>
        </li>
      );
    })}
  </ul>