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

Question

单行就可以了:

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

Answer 1

尝试将标签视为函数调用(请参阅 the documentation )。那么第一个就变成了:

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

第二个:

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

现在应该很清楚，第二个片段实际上没有意义(在 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 会为你做到这一点。请参阅以下 fiddle http://jsfiddle.net/mEB2V/1/ 。再次强调:从长远来看，将两个元素包装到一个 div/section 中很可能会更好。