在 JSX 中返回多个元素

IT技术 javascript reactjs jsx
2021-05-24 12:31:43

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

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

它告诉我第二个元素无法访问并中断。那么我怎样才能返回两个元素呢?对代码进行字符串化无济于事

4个回答

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

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

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

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

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

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

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

您可以在 React 16 中提供的 ReactJS 中使用 Fragment。

这使您可以对子项列表进行分组,而无需向 DOM 添加额外的节点。

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

import React, {Fragment} from 'react';
  To render:


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

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

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