1

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

知道为什么会这样吗？

4

2 回答 2

3

我已经对您的代码进行了试验，并意识到您正在使用 FontAwesome 的新 SVG JavaScript 库，它完全解释了这个问题。该库用于查看 DOM 和插入图标的代码在 React 中表现不佳。这也在这里讨论。

要解决此问题，您可以...

于 2018-04-10T15:36:24.320 回答
1

不要为了小改动而复制代码。

如果您只需要更改课程/内容，请在您的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>

于 2018-04-10T14:04:27.097 回答