字体真棒 5：条件变化时图标不切换

Question

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

当isRecording == true时，图标应该从fa-microphone变为fa-stop 。 但是切换不会发生。 麦克风图标保持不变。

奇怪的是，当我不使用要切换的按钮中的fa-layers class 时，就会发生切换。 但是过渡非常尴尬——图标大小和 position 偏移：

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

知道为什么会这样吗？

Answer 1

我已经尝试了你的代码，并意识到你正在使用FontAwesome的新SVG JavaScript库，它完全解释了这个问题。 该库用于查看DOM并插入图标的代码与React不兼容。 这也在这里讨论。

要解决这个问题，你可以......

• 使用FontAwesome的“old-school”CSS版本并使用CSS手动缩小图标
• 或使用FontAwesome的官方React组件

Answer 2

不要重复代码以进行少量更改 。

如果您只需更改类/内容，请在className使用表达式

并在onClick更改被调用的方法以检查isRecording的状态以调用正确的方法（ stop/record ）

 handleMicroClick(e){ this.state.isRecording ? this.stop(e) : this.record(e); } 

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

Answer 3

老问题，但我也有同样的问题，并且在不使用建议的替代方案的情况下解决了。

你可以使用key属性，强制 React 更新你的组件

!isRecording
&&
<div key={Math.random()} 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 key={Math.random()} 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>

然后它按预期工作；）