ReactJS Соседние элементы JSX должны быть заключены в тег

Question

Это ошибка, с которой я сталкиваюсь:

djacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

Я пытаюсь реализовать только администратор может видеть меню 2 и меню 3, поэтому введите код следующим образом:

          <a>menu 1</a>
          {(this.props.person.ADMIN) ?
            <a>Menu 2</a>
            <a>Menu 3</a>
            :

            ''
          }

Когда я пишу таким образом, удаляя другой тег привязки:

  <a>menu 1</a>
  {(this.props.person.ADMIN) ?
    <a>Menu 2</a>
    :

    ''
  }

Это работает. Что не так с этим, если я использую два элемента в состоянии? Как я могу использовать более одного предмета внутри этого блока?

Answer 1

Сообщение об ошибке довольно ясно. Решение просто использует React.Fragment примерно так:

<a>menu 1</a>
  {(this.props.person.ADMIN) ?
    <>
        <a>Menu 2</a>
        <a>Menu 3 </>
    </>
     :
    ''
  }

Answer 2

Используйте фрагмент, чтобы обернуть два компонента. Вы одновременно возвращаете два элемента, что приводит к этой ошибке.

<a>menu 1</a>
 {(this.props.person.ADMIN) 

   ? <>
       <a>Menu 2</a>
       <a>Menu 3</a>
     </>

   :

     ''
  }

Вы также можете вернуть массив вместо упаковки компонента в один тег.

<a>menu 1</a>
 {(this.props.person.ADMIN) 

   ? [
       <a>Menu 2</a>
       <a>Menu 3</a>
     ]

   :

     ''
  }