使用dangerouslySetInnerHtml时出现的双图标

Question

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

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

这是如何渲染的东西：Click and Open to See Image

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

Answer 1

尝试使用：

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

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