javascript - 在 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.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/>

您还可以返回一个元素数组 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