Font-Awesome 添加属性 aria-hidden 以防止图标出现在浏览器中 [SSR]

IT技术 javascript reactjs font-awesome next.js server-side-rendering
2021-04-29 12:01:12

我想在我的 Next.js 项目中包含一些 Font-Awesome 图标。我已经添加了需要的

<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>

标记到我的头部,然后

<i className="fas fa-arrow-right"></i>

标记到我的渲染方法。如果我在浏览器中打开网站,它会给我这个控制台警告:

index.js:1 警告:来自服务器的额外属性:aria-hidden

<i className="fas fa-arrow-right"></i>

切换到

<i className="fas fa-arrow-right" aria-hidden="true"></i>

我已经尝试过 react-fontawesome 包,但这似乎不适用于 SSR。添加

aria-hidden="false"

手动也没有修复它。

我想这是 SSR 的一个问题,但我无法找到一个好的解决方案或替代方案。

1个回答

我遇到了同样的问题,我通过aria-hidden以这种方式添加到图标来解决:

<i aria-hidden className="fab fa-whatsapp" />

没有更多的警告。