如果用户未登录,我试图返回两个链接。
<Nav> {if(this.state.user) { <NavItem onClick={this.logout}>Log out</NavItem> } else { <NavItem onClick={this.login}>Log in</NavItem> <NavItem onClick={this.register}>Register</NavItem> } } </Nav>
我知道我可以使用三元运算符来做到这一点:
<Nav> {this.state.user ? <NavItem onClick={this.logout}>Log out</NavItem> : <NavItem onClick={this.login}>Log in</NavItem> } </Nav>
问题是我要渲染两个NavItems。我看到我可以用一个函数来做到这一点,但是当我尝试用这样的函数来做到这一点时:
myFunction(){ return( <NavItem onClick={this.login}>Zaloguj się</NavItem> <NavItem onClick={this.login}>Zaloguj się</NavItem> ) }
它告诉我,第二个元素不可访问并中断。那么如何返回两个元素?对代码进行字符串化无济于事
如果您使用的是React v16.2.0及更高版本,则可以使用较短版本的Fragments
<> <NavItem onClick={this.login}>Zaloguj się</NavItem> <NavItem onClick={this.login}>Zaloguj się</NavItem> </>
如果您使用的是React v16以下的版本,则只能在中返回一个元素jsx,因此您必须将元素包装在其中:
jsx
<div> <NavItem onClick={this.login}>Zaloguj się</NavItem> <NavItem onClick={this.login}>Zaloguj się</NavItem> </div>
如果您使用React v16和abose,则可以使用Fragments
import React, { Fragment } from 'react'; ... ... <Fragment> <NavItem onClick={this.login}>Zaloguj się</NavItem> <NavItem onClick={this.login}>Zaloguj się</NavItem> <Fragment/>
您还可以返回此处宣布的元素数组:
return [ <NavItem key="1" onClick={this.login}>Zaloguj się</NavItem>, <NavItem key="2" onClick={this.login}>Zaloguj się</NavItem> ];
根据您的环境,您可能无法使用所有这些解决方案:对片段的支持