reactjs – 如何在React中的另一个return语句中返回多行JSX？

单线工作正常

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

不适用于多行

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

谢谢。

尝试将标签视为函数调用(参见 docs)。然后第一个变成：

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

第二个：

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

现在应该清楚，第二个片段没有真正有意义(你不能在JS中返回多个值)。你必须将它包装在另一个元素(很可能是你想要的，那样你还可以提供一个有效的键属性)，或者你可以使用这样的东西：

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

用JSX糖：

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

你不需要展平结果数组，React会为你做这些。参见下面的小调http://jsfiddle.net/mEB2V/1/.再次：将两个元素包装到一个div / section将很可能是更好的长期。