Как вернуть несколько строк JSX в другой оператор return в React?

одиночная линия работает нормально

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return <p>{n}</p>
    }}
  );
}

не для нескольких строк

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return (
        <h3>Item {n}</h3>
        <p>Description {n}</p>
      )
    }}
  );
}

спасибо.

76
reactjs

6 ответов

попробуйте думать о тегах как о вызовах функций (см. docs). Тогда первым становится:

{[1,2,3].map(function (n) {
  return React.DOM.p(...);
})}

и второе:

{[1,2,3].map(function (n) {
  return (
    React.DOM.h3(...)
    React.DOM.p(...)
  )
})}

теперь должно быть ясно, что второй фрагмент действительно не имеет смысла (вы не можете вернуть более одного значения в JS). Вы должны либо обернуть его в другой элемент (скорее всего, что вы хотите, таким образом, вы также можете предоставить действительный key свойства), или вы можете использовать что-то вроде это:

{[1,2,3].map(function (n) {
  return ([
    React.DOM.h3(...),
    React.DOM.p(...)
  ]);
})}

С сахаром JSX:

{[1,2,3].map(function (n) {
  return ([
    <h3></h3>, // note the comma
    <p></p>
  ]);
})}

вам не нужно сглаживать результирующий массив, React сделает это за вас. См. следующую скрипку http://jsfiddle.net/mEB2V/1/. Опять же: упаковка двух элементов в div / раздел, скорее всего, будет лучше в долгосрочной перспективе.

120

похоже, старый ответ о возврате массива больше не применяется (возможно, с React ~0.9, как написал @dogmatic69 в комментарий).

документы скажем, вам нужно вернуть один узел:

максимальное количество корневых узлов JSX

в настоящее время в рендеринге компонента, вы можете вернуть только один узел; если у вас есть, скажем, список divs для возврат, вы должны обернуть свои компоненты в div, span или любой другой деталь.

Не забывайте, что JSX компилируется в обычный JS; возвращая два функции не имеют синтаксического смысла. Аналогично, не ставьте более одного ребенка в Троице.

во многих случаях вы можете просто обернуть вещи в <div> или <span>.

в моем случае, я хотел вернуться несколько <tr>s. Я завернул их в <tbody> – таблица может иметь несколько тел.

EDIT: начиная с React 16.0, возвращая массив, по-видимому, разрешен снова, пока каждый элемент имеет key: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings

EDIT: React 16.2 позволяет окружить список элементов с помощью <Fragment>…</Fragment> или даже <>…</>, если вы предпочитаете это массиву:https://blog.jmes.tech / react-fragment-and-semantic-html/

33

кроме того, вы можете вернуть несколько элементов списка в некоторой вспомогательной функции внутри компонента React. Просто верните массив html-узлов с помощью :

import React, { Component } from 'react'

class YourComponent extends Component {
  // ...

  render() {
    return (
      <ul>
        {this.renderListItems()}
      </ul>
    )
  }      

  renderListItems() {
    return [
      <li key={1}><a href="#">Link1</a></li>,
      <li key={2}><a href="#">Link2</a></li>,
      <li key={3} className="active">Active item</li>,
    ]
  }
}
6

С реагировать V16 под.0.0 далее, можно вернуть несколько элементов, обернув их в Array

render() {
  return (
    {[1,2,3].map(function (n) {
      return [
        <h3>Item {n}</h3>.
        <p>Description {n}</p>
      ]
    }}
  );
}

и с реагировать V16 под.2.0 новая функция под названием React Fragments вводится, который вы можете использовать для обертывания нескольких элементов 

render() {
  return (
    {[1,2,3].map(function (n, index) {
      return (
        <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
        </React.Fragment>
      )
    }}
  );
}

согласно документации:

общий шаблон в React заключается в том, что компонент возвращает несколько элементы. Фрагменты позволяют группировать список детей без добавления дополнительные узлы к DOM.

фрагменты заявил с явной синтаксис может быть ключи. Примером использования для этого является сопоставление коллекции с массивом фрагменты - например, для создания списка описание:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

ключ является единственным атрибутом, который может быть передан фрагменту. В в будущем, мы можем добавить поддержку дополнительных атрибутов, таких как событие дрессировщики.

4

можно использовать createFragment здесь.

https://facebook.github.io/react/docs/create-fragment.html

import createFragment from 'react-addons-create-fragment';
...
{[1,2,3].map((n) => createFragment({
    h: <h3>...</h3>,
    p: <p>...</p>
  })
)}

(используя синтаксис ES6 и JSX здесь)

сначала вы должны добавить : 

npm install --save react-addons-create-fragment

преимущество над решением Яна Олафа Кремса: react не жалуется на отсутствие key

2

С React > 16 вы можете использовать react-composite.

import { Composite } from 'react-composite';

// ...

{[1,2,3].map((n) => (
  <Composite>
    <h2>Title {n}</h2>
    <p>Description {n}</p>
  </Composite>
))};

конечно, react-composite должен быть установлен.

npm install react-composite --save
0