通过三元运算符在登录寄存器和主页之间切换

Question

我正在尝试使用三元运算符在登录、注册和主页表单之间切换。但是，当我编译时，出现错误提示 'this.state.route === signIn' this is a reserved keyword。我知道，保留关键字是什么，但我不明白为什么它分配这个而不是检查条件，任何人都可以帮助更正我的代码吗？

<Navigation onRouteChange={this.onRouteChange}/> /*route change for sign out button*/
    { this.state.route === 'home'/*displays homescreen*/
        ?  <div>
            <Logo />
               <Rank />
                 <ImageLinkForm 
                 onInputChange={this.onInputChange} 
                 onSubmit={this.onSubmit}
                 />
                     <FaceRecognition box={this.state.box} 
                       imageUrl=  {this.state.imageUrl} />  
                      </div>
        :{ 
            this.state.route === 'signIn'/*shows error that this is a reserved keyword*/
            ? <SignIn onRouteChange={this.onRouteChange} />
            :<Register onRouteChange={this.onRouteChange} />
        }
   }

Answer 1

好像冒号后面多了一个花括号。还可以尝试使用圆括号分隔对象以提高可读性。试试这个：

   <Navigation onRouteChange={this.onRouteChange} />
     {this.state.route === 'home' ? (
       <div>
         <Logo />
         <Rank />
         <ImageLinkForm 
           onInputChange={this.onInputChange} 
           onSubmit={this.onSubmit}
         />
         <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl} />  
       </div>
     ) : (
       this.state.route === 'signIn
         ? <SignIn onRouteChange={this.onRouteChange} />
         : <Register onRouteChange={this.onRouteChange} />
     )}

通过三元运算符在登录寄存器和主页之间切换

switch between sign in register and home in react through ternary operartor

reactjs

react-router

react-state