javascript - freecodecamp 番茄钟 - 条件渲染查询

Question

项目

我的返回方法中有以下逻辑：

if condition1 AND condition2 THEN do x, else do y

if condition3 AND condition4 THEN do z, else do w

但我想做的是：

If condition 1 {
   evaluate condition 2{
       then do x
       else do y
}
else (where condition 3 applies because condition 1 is false){
    evaluate condition 4{
       then do z
       else do w
}

所以在我的

我看到的标签：

x or y OR z or w (正确) NOT x or y AND z or w (不正确)

目前我看到：25::05:00 当我想看到：25:00（如果 timerType 是'Session）或：05:00（如果 timerType 是'Break'

   
     render()
        {
          const clockDisplayStyling ={
            display: "flex",
            flexDirection: "column",
            alignItems: "center"}
          
         return (
           <div>
            
             <p>{this.state.str}</p>
             <div id = "break-session-box">
             <button onClick = {this.change}>Change</button>  
               
            <div id = "break">
            <label id="break-label">Break Length     </label>
            
               <div id = "break-button-display">
                 <button id="break-decrement" onClick = {this.decreaseBreakLength}>Decrease</button>
             <p id="break-length">{this.state.breakLength}</p>
            <button id="break-increment" onClick = {this.increaseBreakLength}>Increase</button>
              
               </div>
             
             </div>
             
             <div id = "session">
            <label id="session-label">Session Length</label>
            
               <div id = "session-button-display">
               <button id="session-decrement" onClick = {this.decreaseSessionLength}>Decrease</button>
             <p id="session-length">{this.state.sessionLength}</p>
            <button id="session-increment" onClick = {this.increaseSessionLength}>Increase</button>
               </div>
             
             </div>
              
             </div>
             
             <label id="timer-label" style = {{display: "flex", flexDirection: "column",alignItems: "center"}}>{this.state.timerType}</label>
             <p id="time-left" style = {clockDisplayStyling}>
    
            
    **{(this.state.timerType=== 'Session')  && (this.state.sessionLengthCountdown>=10)?          this.state.sessionLengthCountdown + ':': '0'+ this.state.sessionLengthCountdown+':'}:
     {(this.state.timerType=== 'Break')  && (this.state.breakLengthCountdown>=10)?          this.state.breakLengthCountdown + ':': '0'+ this.state.breakLengthCountdown+':'}**
    
     {this.state.seconds<10 ? '0' + this.state.seconds: this.state.seconds}</p>
             
            <br />
            
            <p></p>
            <div id = "button-group">
    
            <button id="start_stop" onClick ={this.startStop}>Play/Stop</button>
            
            <button id="reset" onClick = {this.reset}>Reset</button>
            </div>
             
             <p>!{this.state.strTimeDisplay}</p>
             
             
           </div>)
        } 
    }    
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    
       

{(this.state.timerType=== 'Session')  && (this.state.sessionLengthCountdown>=10)?          this.state.sessionLengthCountdown + ':': '0'+ this.state.sessionLengthCountdown+':'}:
     {(this.state.timerType=== 'Break')  && (this.state.breakLengthCountdown>=10)?          this.state.breakLengthCountdown + ':': '0'+ this.state.breakLengthCountdown+':'}

标签： javascriptreactjs