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

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

Спасибо.

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

{[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 / section, скорее всего, будет лучше в долгосрочной перспективе.

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

В документах говорится, что вам нужно вернуть один узел:

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

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

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

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

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

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

РЕДАКТИРОВАТЬ: React 16.2 позволяет окружать список элементов <Fragment>…</Fragment>или даже <>…</>, если вы предпочитаете это массивом: https://blog.jmes.tech/react-fragment-and-semantic-html/

Начиная с React v16.0.0 и далее, можно возвращать несколько элементов, заключая их вArray

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

Также в React 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>
  );
}

key - единственный атрибут, который можно передать Fragment. В будущем мы можем добавить поддержку дополнительных атрибутов, таких как обработчики событий.

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

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>,
    ]
  }
}

Вы можете использовать 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)

вам сначала нужно добавить react-addons-create-fragmentпакет:

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

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

Обновлено

Используйте React Fragment. Это просто. Ссылка на фрагмент документации.

render() {
  return (
    <>
    {[1,2,3].map((value) => <div>{value}</div>)}
    </>
  );
}

Старый ответ - устаревший

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

import { Composite } from 'react-composite';

// ...

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

Конечно, необходимо установить реакт-композит.

npm install react-composite --save

Это просто по фрагменту React <></>и React.Fragment:

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