単一行は正常に動作します

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

ありがとう。

タグを関数呼び出しと考えてみてください（docsを参照）。次に、最初のものは次のようになります。

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

そして2番目のもの：

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

これで、2番目のスニペットが実際には意味をなさないことが明らかになります（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/を参照してください。繰り返しますが、2つの要素をdiv / sectionにラップする方が長期的には良いでしょう。

配列を返すことについての古い答えはもはや適用されないようです（おそらくReact〜0.9以降、@ dogmatic69がコメントに書いたように）。

ドキュメントは単一のノードを返す必要があると言います：

JSXルートノードの最大数

現在、コンポーネントのレンダーでは、1つのノードのみを返すことができます。たとえば、返すdivのリストがある場合は、div、span、またはその他のコンポーネント内でコンポーネントをラップする必要があります。

JSXが通常のJSにコンパイルされることを忘れないでください。2つの関数を返すことは、実際には構文的に意味がありません。同様に、1つに3人以上の子供を入れないでください。

多くの場合、単純にa <div>またはa<span>。

私の場合、複数<tr>のを返したかった。私はそれらを<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/

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コンポーネント内のヘルパー関数でいくつかのリスト項目を返すこともできます。次のkey属性を持つ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>,
    ]
  }
}

使用できます 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

Jan Olaf Kremsのソリューションに対する利点：反応は欠落について文句を言わない 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>
))};

もちろん、react-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>
        ),
      )}
    </>
  );