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并且使用了，则可以使用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>
  ];

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

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

根据您的环境，您可能无法使用所有这些解决方案：support for fragments

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中呈现元素。

Answer 4

您可以在ReactJS中使用Fragment，它可以在React 16中使用。

允许您在不添加额外节点的情况下对子列表进行分组 DOM。

您可以导入如下所示的片段

import React, {Fragment} from 'react';

  To render:


  <Fragment>
   <ChildA />
   <ChildB />
   <ChildC />
 </Fragment>

通过使用Fragment，您可以避免额外的html元素，例如div被渲染。

有关详细信息，请参阅https://reactjs.org/docs/fragments.html

在JSX中返回多个元素

4 个答案: