javascript - 字体很棒 5 : icon not switching when condition changes

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 类时，切换发生了。但是转换非常尴尬——图标大小和位置偏移:

!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 配合使用。这也讨论了here .

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

• 使用the "old-school" CSS version of FontAwesome并使用 CSS 手动缩小图标
• 或使用FontAwesome's official React component