在JSX中返回多个元素

Question

如果用户没有登录,我正在尝试返回两个链接.这样的事情:

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

它告诉我第二个元素是无法访问并且中断.那我怎么能回归两个元素呢？字符串化代码没有帮助

Answer 1

如果您使用的是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>
  ];

如果您使用的是React v16.2.0及更高版本，则可以使用较短版本的Fragments

<>
 <NavItem onClick={this.login}>Zaloguj si?</NavItem>
 <NavItem onClick={this.login}>Zaloguj si?</NavItem>
</>

根据您的环境，您可能无法使用所有这些解决方案：支持片段

Answer 2

在最新的反应版本中,您可以将它们包装在空片段中:

<>
  <NavItem onClick={this.login}>Zaloguj si?</NavItem>
  <NavItem onClick={this.login}>Zaloguj si?</NavItem>
</>

Answer 3

你需要把它包裹起来,比如<div>或<React.Fragment>(v16):

<React.Fragment>
  <NavItem onClick={this.login}>Log in</NavItem>
  <NavItem onClick={this.register}>Register</NavItem>
</React.Fragment>

您必须使用三元运算符而不是if语句来直接呈现JSX中的元素.