如何在React.js中注入"FontAwesomeIcon"？

Question

我正在尝试做一些事情：

(if navbar is open){
//display close icon
navToggle.innerHTML = "<FontAwesomeIcon icon={['fas', 'times']} />";
}
else{
//display burger icon
navToggle.innerHTML = "<FontAwesomeIcon icon={['fas', 'bars']} />";
}

我正在汉堡图标的 onclick 侦听器中执行此操作。

我正在使用“react-fontawesome”库。这些图标工作正常，但是当 javascript 尝试注入它们时它们不会出现，我猜因为它们是一个反应组件而不是由反应库呈现。如果可能的话，我如何通过其他方法实现这一点？我应该已经渲染了两个图标，然后我可以切换一个或另一个的 css，而不是注入它们吗？

Answer 1

在 React 中，您可以像这样使用它们：

const MyComponent = ({ navBarOpen }) => (
   navBarOpen? <FontAwesomeIcon icon={['fas', 'times']} /> : <FontAwesomeIcon icon={['fas', 'bars']} />
);

如何在React.js中注入"FontAwesomeIcon"？

How to inject "FontAwesomeIcon" in React.js?

javascript

font-awesome

reactjs