javascript - 如何在 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']} />
);