Font awesome 5: icon not switching when condition changes

问题

I'm using font awesome 5 in a react.js project, and having trouble make the icon switch in a conditional statement. Here's the sample code:

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

When isRecording == true, the icon should change from fa-microphone to fa-stop. But the switch doesn't happen. The microphone icon stays.

Strangely, when I don't use the fa-layers class in the button to be switched in, the switch happens. But the transition is super awkward--icon size and position shift:

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

Any idea why this is happening?

回答1:

I've experimented around with your code and realized that you are using FontAwesome's new SVG JavaScript library which completely explains the problem. The code that that library uses to look at the DOM and insert the icons doesn't play well with React. This is also discussed here.

To solve this problem, you can either ...

use the "old-school" CSS version of FontAwesome and shrink the icon manually using CSS
or use FontAwesome's official React component

回答2:

Don't duplicate code for little changement.

If you just have to change a class/content use an expression in your className

And change your called method in onClick to check the state of isRecordingto call the right method (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>

来源：https://stackoverflow.com/questions/49755509/font-awesome-5-icon-not-switching-when-condition-changes

标签

javascript

reactjs

font-awesome

font-awesome-5