javascript - 在 JSX 中返回多个元素
问题描述
如果用户未登录,我将尝试返回两个链接。像这样:
<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>
问题是我想渲染两个 NavItem。我看到我可以用一个函数来做到这一点,但是当我尝试在这样的函数中做到这一点时:
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
,所以你必须将你的元素包装在一个中:
<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>
];
根据您的环境,您可能无法使用所有这些解决方案:支持片段