Возврат нескольких элементов в 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

Вы можете использовать Fragment в ReactJS, который доступен в React 16.

, который позволяет группировать список детей без добавления дополнительных узлов в DOM.

Вы можете импортировать фрагмент, как показано ниже:

import React, {Fragment} from 'react';

  To render:


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

Используя Fragment, вы можете избежать создания дополнительного HTML-элемента, такого как div.

Длябольше информации, вы можете обратиться https://reactjs.org/docs/fragments.html

Answer 2

Вам нужно обернуть это вокруг чего-то, например <div> или <React.Fragment> (v16):

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

Вы должны использовать троичные операторы вместо операторов if для прямой визуализации элементов вJSX.

Answer 3

Если вы используете версию ниже React v16, вы можете вернуть только один элемент в jsx, поэтому вы должны обернуть ваши элементы в один:

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

Если вы используете React v16 и не используетеВы можете использовать Фрагменты

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 и выше вы можете использовать более короткую версию фрагментов

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

В зависимости от вашей среды вы не сможете использовать все эти решения: поддержка фрагментов

Answer 4

В последней версии реакции вы можете обернуть их в пустой фрагмент:

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