在JSX中返回多个元素
在JSX中返回多个元素
提问于 2018-05-28 19:33:55
如果用户没有登录，我会尝试返回两个链接。如下所示：
<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>
)
}它告诉我，第二个元素是无法访问的，因此会中断。那么我如何返回两个元素呢？限定代码无济于事
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-05-28 19:38:47
如果您使用的是React v16.2.0及更高版本，则可以使用较短版本的片段
<>
<NavItem onClick={this.login}>Zaloguj się</NavItem>
<NavItem onClick={this.login}>Zaloguj się</NavItem>
</>如果您使用的是React v16以下的版本，则在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/>您还可以返回一个元素数组as announced here
return [
<NavItem key="1" onClick={this.login}>Zaloguj się</NavItem>,
<NavItem key="2" onClick={this.login}>Zaloguj się</NavItem>
];根据您的环境，您可能无法使用所有这些解决方案：support for fragments
Stack Overflow用户
发布于 2018-05-28 19:37:35
在最新的react版本中，您可以将它们包装在一个空片段中：
<>
<NavItem onClick={this.login}>Zaloguj się</NavItem>
<NavItem onClick={this.login}>Zaloguj się</NavItem>
</>Stack Overflow用户
发布于 2018-05-28 19:38:04
你需要用<div>或<React.Fragment> (V16)把它包起来：
<React.Fragment>
<NavItem onClick={this.login}>Log in</NavItem>
<NavItem onClick={this.register}>Register</NavItem>
</React.Fragment>您必须使用三元运算符而不是if语句来直接呈现JSX中的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50565468
复制相关文章
相似问题