[解決済み] Reactで複数行のJSXを別のreturnステートメントで返すには？

質問

一行で大丈夫です。

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

そして2つ目。

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

これで、2番目のスニペットが本当に意味をなさないことが明らかになったでしょう（JavaScriptでは複数の値を返すことはできません）。別の要素でラップするか (おそらくあなたが望むことでしょう。そうすれば、有効な 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にまとめると、長期的にはより良くなる可能性が高いです。