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

Question

我将我的社交链接数据存储在 firebase 上，现在我想制作一个 <li> 我的社交链接列表，但是我这里的 icon 对象没有向我显示图标，而是向我显示如下元素：@987654327 @.它应该显示为图标，我该怎么做？

Firebase 数据：-

代码：-

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


//Normal output something like this
<li>
    <a href="https://github.com/mohitdevelops" target="_blank">
        <BsGithub />
    </a>
</li>

它像这样向我展示：-

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

Answer 1

你需要像这样使用 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>