Javascript 三元运算符第二部分未渲染

第二部分，即注册部分，不进行渲染

其目的是在单击每个选项卡时获得更改的范围，即sign、sign-up和forget，这是主类，表单类在其中被调用。 下面的代码是用于在屏幕中渲染的原始代码

   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>
 )}
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
//this.setOptionSignIn=this.setOptionSignIn.bind（this）；
//this.setOptionSignUp=this.setOptionSignUp.bind（this）；
//this.setOptionForget=this.setOptionForget.bind（this）；
此.state={
选择：1
}
}
setOptionSignIn=（）=>{
此.setState（（）=>{
返回{
选择：1
}
})
}
设置选项签名=（）=>{
此.setState（（）=>{
返回{
选择：2
}
})
}
setOptionForget=（）=>{
此.setState（（）=>{
返回{
选择：3
}
})
}
render（）{
返回(
{
console.log（this.state.option+，在前面，类型为“+typeof this.state.option”）
}
登录到您的帐户
创建帐户
重置密码
{
console.log（this.state.option+”之后，类型为“+typeof this.state.option”）
}

登录
注册
忘记

)}
}

您上面使用的

三元

条件是正确的。问题可能与未正确更新的状态有关

必须使用

this.setState（）

方法更新状态，而不是直接在

this.state

对象上更改状态属性

请查看以下代码：

登录方法：

setOptionSignIn（）{
这是我的国家({
选择：1
});
}

注册方法

setOptionSignUp（）{
这是我的国家({
选择：2
});
}

忘记密码方法：

setOptionForget（）{
这是我的国家({
选项：0
});
}

要根据选项切换量程，请在span中插入条件

 <span>{this.state.option === 1 ? 'Sign in to your account' : this.state.option === 2 ? 'Create an account' : 'Reset your password'}</span>

{this.state.option==1？'登录您的帐户：this.state.option==2？'创建帐户'：'重置密码'}

---

希望这对您有所帮助。

尝试根据您想要的逻辑添加括号，例如：

this.state.option==1？“登录”：（this.state.option==2？“注册”：“忘记”）

我尝试过，但仍然没有采用第二个条件，当选项为2时，您可以做一些您所在州的日志，并告诉我们它在不同州记录了什么

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）}登录到您的帐户创建帐户重置密码{console.log（this.state.option+“after and type是”+typeof this.state.option）}@AtinSingh代码已经更新，前面的注释中提到了控制台细节