字体令人敬畏的5:当条件改变时图标不切换

Question

我在react.js项目中使用了字体超赞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和插入图标的代码并不能很好地发挥作用。这也是讨论这里。

为了解决这个问题你可以..。

• 使用FontAwesome的“旧式”CSS版本并使用CSS手动缩小图标
• 或者使用FontAwesome官方反应部分

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属性，强制响应更新组件。

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

则如预期般运作;)