Question

我的return方法中包含以下逻辑：

如果condition1和condition2然后执行x，否则执行y

如果condition3 AND condition4然后执行z，否则执行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或y或z或w（正确）不 x或y AND z或w（不正确）

此刻，我看到： 25 :: 05：00 当我想看到： 25:00（如果timerType为“会话”）要么： 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+':'}

freecodecamp pomodoro时钟-条件渲染查询

0 个答案: