Однорядковий чудово працює

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

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

ключ - єдиний атрибут, який можна передати фрагменту. У майбутньому ми можемо додати підтримку для додаткових атрибутів, таких як обробники подій.

Крім того, вам може знадобитися повернути кілька елементів списку в якійсь допоміжній функції всередині компонента 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

Перевага над рішенням Яна Олафа Кремса: реакція не скаржиться на зниклих key

Оновлено

Використовуйте фрагмент реагування. Це просто. Посилання на документацію фрагментів.

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

Стара відповідь - застаріла

При React> 16 ви можете використовувати реакційноздатний композит .

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