三元运算符第二部分不渲染 React JS答案

【问题标题】：Ternary Operator second part not rendering React JS三元运算符第二部分不渲染 React JS
【发布时间】：2020-04-14 03:53:57
【问题描述】：

第二部分，即注册部分未呈现

目的是在单击每个选项卡时更改跨度，即签名，注册并忘记这是主类，并在其中调用表单类。以下代码是用于在屏幕中渲染的原始代码


   class App extends React.Component {
 constructor(props) {
   super(props);
   // this.setOptionSignIn = this.setOptionSignIn.bind(this);
   // this.setOptionSignUp = this.setOptionSignUp.bind(this);
   // this.setOptionForget = this.setOptionForget.bind(this);

   this.state = {
     option : 1    
   }
 }

setOptionSignIn = () => {
 this.setState(()=> {
   return {
     option : 1
   }
 })
}
setOptionSignUp = () => {
 this.setState(()=> {
   return {
     option : 2
   }
 })
}
setOptionForget = () => {
 this.setState(()=> {
   return {
     option : 3
   }
 })
}
render() {
 return (
     <div className="container">
     {
       console.log(this.state.option+"before and type is "+ typeof this.state.option)
     }
     <header className={
 `header-headings ${this.state.option === 1 ? 'sign-in' : this.state.option === 2 ? 'sign-up' : 'forgot'}`}>       
         <span>Sign in to your account</span>
         <span>Create an account</span>    
         <span>Reset your password</span>
     </header>   
     {
       console.log(this.state.option+"after and type is "+ typeof this.state.option)
     }
     <ul className="options">
     <li className={this.state.option === 1 ? 'active' : ''} onClick={this.setOptionSignIn}>Sign in</li>
     <li className={this.state.option === 2 ? 'active' : ''} onClick={this.setOptionSignUp}>Sign up</li>
     <li className={this.state.option === 3 ? 'active' : ''} onClick={this.setOptionForget}>Forget</li> 
     </ul>
     <Form optionState={this.state.option} />
     </div>
 )}
}

【问题讨论】：

尝试根据你想要的逻辑添加括号，比如：this.state.option === 1 ? "sign-in": (this.state.option === 2 ? "sign-up" : "forgot")
我尝试但在选项是2 span>时仍未采取第二个条件
你能做一些关于你的状态的日志，并告诉我们它在不同的状态下记录了什么吗？ console.log("state is and type is" , this.state.option , typeof this.state.option)
代码是：
{ console.log(this.state.option+"before and type is "+ typeof this.state.option) }
header-headings ${this.state.option === 1 ? 'sign-in' : this.state.option === 2 ? 'sign-up' : 'forgot'}}> 登录您的帐户创建帐户重置您的密码
{ console.log(this.state. option+"之后和类型是"+ typeof this.state.option) }
@AtinSingh 代码已更新，之前评论中提到的控制台详细信息