隱藏Font Awesome圖標組件，並根據狀態顯示另一個

Question

我正在建立一個具有4個會話的番茄定時器。 當25分鍾計時器計時到時， sessionNumber 1加到狀態變量sessionNumber 。 番茄周期開始時，我有四個顯示的圓形/未選中的復選框：

<FontAwesomeIcon
  icon={faCircle}
  size="2x"
  className="pomodoro-unchecked session-checkbox"
/>

每次將1添加到sessionNumber狀態時，我想隱藏一個並顯示不同的圖標組件：

<FontAwesomeIcon
  icon={faCheckCircle}
  size="2x"
  className="pomodoro-checked session-checkbox"
/>

我想到的唯一方法是花費大量代碼-例如，基於每個會話號的if語句（如if語句，如果會話為0，則顯示4個未選中的圓圈（所有代碼均包含） （四個組成部分），並且如果會話為1，則顯示1個選中的圓圈和3個未選中的圓圈，依此類推。 我考慮的第二種方法是給每個人一個不同的類名，並在更改會話號的方法中，根據它是哪個會話號來顯示和隱藏每個人（那會更復雜）。 有沒有更簡單，更簡潔的方法？

Answer 1

您可以在state使用數組。 您可以使用四個“ faCircle”初始化數組，然后在setState上使用array.fill()方法使用“ faCheckCircle”填充圖標。 然后，您可以映射到數組以呈現適當的圖標。

class SessionIcons extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sessions: 0,
      icons: ["faCircle", "faCircle", "faCircle", "faCircle"]
    };
  }

  onAddSession = () => {
    this.setState(state => ({
      sessions: state.sessions + 1,
      icons: state.icons.fill("faCheckCircle", 0, state.sessions + 1)
    }));
  };

  render() {
    return (
      <div>
        {this.state.icons.map((icon, index) => (
          <FontAwesomeIcon
            key={icon + index}
            icon={icon === "faCircle" ? faCircle : faCheckCircle}
            size="2x"
          />
        ))}
        <button onClick={this.onAddSession}>Add session</button>
      </div>
    );
  }
}

演示： https ： //codesandbox.io/s/shy-tdd-qzs1n

Answer 2

 class Timer extends React.Component{
  state = {  sessionNumber: 1}

 checkTimer = () =>{
..your logic to check timer every 25 mins
 this.setState({timerState:1})
  }
render(){
Let font;
if( this.state.sessionNumber == 1)
 {
    font = <FontAwesomeIcon
    icon={faCircle}
   size="2x"
   className="pomodoro-unchecked session-checkbox"
  />
 }
   else if(this.state.sessionNumber == 2)
   {      
    font = FontAwesomeIcon
  icon={faCheckCircle}
  size="2x"
  className="pomodoro-checked session-checkbox"
    />
   return(

        {font}


     )
    }
   }