React：如何使用 fetch API 顯示 react-icons 元素？

Question

我將我的社交鏈接數據存儲在 firebase 上，現在我想制作一個<li>我的社交鏈接列表，但我這里的icon object 沒有向我顯示圖標，而是向我顯示如下元素： <BsBehance /> . 它應該顯示為圖標，我該怎么做？

Firebase 數據：-

代碼：-

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 是一個字符串，因此它被顯示為一個字符串。 如果要根據該動態字符串呈現組件，則需要有一個 object，其中鍵名是您將從服務器獲取的字符串。 而價值，可以是組件本身。

當您在 {} 中插入一個字符串時，React 會將其呈現為一個字符串，即使它們是 < /> 格式。

而且，盡量不要使用 dangerouslySetInnerHTML，因為它有很高的安全性問題。

對於您的上述情況，這是一個codesanbox 。 請檢查這個：

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-icon/bs導入的，圖標名稱來自firebase數據，所以可以在react.js中使用動態導入導入，但是對於動態導入，你需要單獨處理加載，但我提供了簡單的方法。

需要安裝react-icon

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>