Возвратите несколько элементов внутри React.render()

Я новичок в реагировании, и я столкнулся с этой проблемой:

render: function(){
    return (
        <h3>Account</h3>
        <a href="#" onClick={some_event}>Login</a>
        <a href="#" onClick={some_event}>Logout</a>
)}

Когда я делаю это как это, он дает мне ошибку, говорящую как multiple components must wrapt with end

Должен ли я создать один компонент для каждого тэга html или каждой строки, или я могу сделать таким образом.

Любое предложение?

Ответ 1

В React <v16.0 метод render может рендерить только один корневой узел. (обновление: это изменено в v16, см. ниже). В вашем случае вы возвращаете 3 узла. Чтобы обойти это, вы можете обернуть ваши 3 узла в один корневой узел:

render: function(){
  return (
    <div>
      <h3>Account</h3>
      <a href="#" onClick={some_event}>Login</a>
      <a href="#" onClick={some_event}>Logout</a>
    </div>
)}

В React v16 возможно, чтобы render() возвращал массив элементов.

Как и в случае с другими массивами, вам нужно добавить ключ к каждому элементу, чтобы избежать предупреждения о ключе:

render() {
  return [
    <ChildA key="key1" />,
    <ChildB key="key2" />,
    <ChildC key="key3" />,
  ];
}

Другой вариант - использовать фрагмент. Фрагменты позволяют группировать список детей без добавления дополнительных узлов в DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Существует также короткий синтаксис (<>) для объявления фрагментов:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Ответ 2

Возвращает массив элементов, разделенных запятой.

render: function(){
  return ([
    <h3>Account</h3>,
    <a href="#" onClick={some_event}>Login</a>,
    <a href="#" onClick={some_event}>Logout</a>
  ])
}

Ответ 3

Вы можете использовать следующий синтаксис для fragments в React 16.2 +:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Ответ 4

React.render - это функция JavaScript, возвращающая элементы DOM. Поскольку в JavaScript функции не могут возвращать несколько выражений, мы не можем возвращать несколько элементов в React. Функция возвращает первое выражение сразу после ключевого слова "return", а затем функция умирает. Вот почему мы можем это сделать:

если (1) { возвращение 1 } return 2

Ответ 5

Есть несколько вариантов:

Просто заверните его в любые <div></div> или <section></section>. render() должен возвращать один элемент.
Вы можете разделить его и иметь несколько компонентов, которые реализуют определенную логику, которая лучше и используется, чтобы быть хорошей практикой в React