时间戳

首页 > 解决方案 > 使用危险的SetInnerHtml时出现双图标

reactjs - 使用危险的SetInnerHtml时出现双图标

问题描述

我有一个反应代码，我试图通过将字符串格式的 div 内容传递给反应组件来创建 fontawesome 图标，但是在渲染它时，它会创建一个带有超链接的复制图标，另一个没有超链接，这是我使用危险的代码片段 SetInnerHtml

<div dangerouslySetInnerHTML={{ __html: this.createAllIconsAndHyperLinks() }} />

createAllIconsAndHyperLinks()方法返回内容为：

<a target="_blank" rel="noopener noreferrer" href="https://github.com/singh_kshitij"><i class="fab fa-github"/></a>
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/ikshitijsingh"><i class="fab fa-twitter"/></a>
<a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/users/7088832/kshitij-singh"><i class="fab fa-stack-overflow"/></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/ikshitijsingh/"><i class="fab fa-linkedin"/></a>

这是事物的渲染方式： 单击并打开以查看图像

实际上看到重复的图标，一个有链接，另一个没有链接。如果有人可以提供帮助，可能会出现什么问题。

标签： reactjs

解决方案

尝试使用：

<a target="_blank" class="fab fa-github" rel="noopener noreferrer" href="https://github.com/singh_kshitij">

Yould 可以添加一些 CSS 来设置链接的样式。

推荐阅读