字体真棒5:当条件改变时图标不切换

时间:2018-04-10 13:55:13

标签: javascript reactjs font-awesome font-awesome-5

我在react.js项目中使用了字体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>

知道为什么会这样吗?

2 个答案:

答案 0 :(得分:1)

不要重复代码小改动

如果您只需更改课程/内容,请使用className

中的表达式

并在onClick中更改您的被叫方法以检查isRecording的状态以调用正确的方法(stop/record

&#13;
&#13;
handleMicroClick(e){
  this.state.isRecording ? this.stop(e) : this.record(e);
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

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