Javascript 字体5：条件改变时图标不切换

我在react.js项目中使用了font awesome 5，在条件语句中切换图标时遇到了问题。以下是示例代码：

!isRecording
&&
<div style={styles.recordButton} onClick={e => this.record(e)}>
    <span className="fa-layers  fa-4x">
      <div><i className="fas fa-circle " style={{color: Colors.mainOrange}}></i></div>
      <div><i className="fa fa-microphone  fa-inverse" data-fa-transform="shrink-6"></i></div>
    </span>
</div>
||
<div style={styles.recordButton} onClick={e => this.stop(e)}>
    <span className="fa-layers  fa-4x">
      <div><i className="fas fa-circle " style={{color: Colors.mainOrange}}></i></div>
      <div><i className="fas fa-stop  fa-inverse" data-fa-transform="shrink-6"></i></div>
    </span>
</div>

---

知道为什么会发生这种情况吗？

不要为小改动复制代码

如果您只需要更改类/内容，请在

className

并在

onClick

中更改调用的方法以检查

isRecording

的状态以调用正确的方法（

stop/record

）

handleMicroClick（e）{
this.state.isRecording？this.stop（e）：this.record（e）；
}

handleMicroClick（e）}>

我对您的代码进行了试验，发现您使用的是FontAwesome新的SVG JavaScript库，它完全解释了这个问题。该库用于查看DOM和插入图标的代码与React不兼容。本文还对此进行了讨论

要解决这个问题，你可以

• 使用CSS手动使用并收缩图标
• 或使用

---

@Alexis不幸的是，这种方法不起作用。当

isRecording==false

时，它会显示麦克风按钮，但当条件改变时，它不会切换到停止按钮。我可以100%向您保证，当您使用

setState

正确更新状态对象的

isRecording

属性时，图标会改变。问题一定出在代码的其他地方。@NiklasHigi我可以100%向您保证，

isRecording

的状态正在更改，没有问题。请参阅我更新的帖子。@NatashaC您是否使用状态更新变量？（

this.state.isRecording

）@Alexis是的，我使用

setState

。随着国家的变化。请看我的最新帖子。就是这个。更改为字体组件，现在可以使用了。非常感谢。

!isRecording
&&
<div style={styles.recordButton} onClick={e => this.record(e)}>
    <span className="fa-layers  fa-4x">
      <div><i className="fas fa-circle " style={{color: Colors.mainOrange}}></i></div>
      <div><i className={isRecording ? `fa fa-stop  fa-inverse` : `fa fa-microphone  fa-inverse`} data-fa-transform="shrink-6"></i></div>
    </span>
</div>
||
<div style={styles.recordButton} onClick={e => this.stop(e)}>
    <span className=" fa-2x">
      <div key="stopRecord"><i className="fa fa-stop-circle fa-2x" style={{color: Colors.mainOrange}}></i></div>
    </span>
</div>