在 JSX 中返回多个元素

Posted 2023-02-21

【中文标题】在 JSX 中返回多个元素

【英文标题】：Returning multiple elements in JSX

【发布时间】：2018-11-06 23:51:35

【问题描述】：

如果用户未登录，我会尝试返回两个链接。像这样：

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

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

【问题讨论】：

jsx 需要一个包装元素或一个数组。因此，请尝试将它们放入数组...[，] 或使用包装器。

你想要React.Fragment

【参考方案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

【讨论】：

请提及<React.Fragment>，我会选择最好的，因为这个答案包含了大多数方法

只想指出返回元素数组需要键！ （正如您共享的链接中所述）

@Tanckom key 属性在示例中。你说的是这个吗？

@KevinAmiranoff 我知道，但只是想指出它，否则它不会起作用（我花了 10 分钟才弄明白）

【参考方案2】：

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

它可以让您对子列表进行分组，而无需添加额外的节点 DOM。

您可以像下面这样导入片段，

import React, Fragment from 'react';

  To render:


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

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

更多信息，您可以参考https://reactjs.org/docs/fragments.html

【参考方案3】：

您需要将其包裹在某些东西上，例如 <div> 或 <React.Fragment> (v16)：

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

您必须使用三元运算符而不是 if 语句来直接渲染 JSX 中的元素。

【参考方案4】：

在最新的 react 版本中，您可以将它们包装在一个空片段中：

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