如何在 React 的另一个返回语句中返回多行 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>
      )
    }}
  );
}

原文由 Shawn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试将标记视为函数调用（请参阅 文档）。那么第一个就变成了：

 {[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 会为你做到这一点。请参阅以下小提琴 http://jsfiddle.net/mEB2V/1/ 。再次重申：将这两个元素包装到一个 div/section 中很可能是长期更好的选择。

原文由 Jan Olaf Krems 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

似乎 Jan Olaf Krems 关于返回数组的回答 不再适用（可能是因为 React ~0.9，如 @dogmatic69 在 评论 中所写）。

文档 说你需要返回一个节点：

JSX 根节点的最大数量

目前，在一个组件的渲染中，你只能返回一个节点；例如，如果您有要返回的 div 列表，则必须将您的组件包装在 div、span 或任何其他组件中。

不要忘记 JSX 会编译成常规的 JS；返回两个函数并没有真正的语法意义。同样，不要在一个三元组中放置多个孩子。

在许多情况下，您可以简单地将内容包装在 <div> 或 <span> 中。

就我而言，我想返回多个 <tr> s。我将它们包装在 <tbody> 中——一个表允许有多个主体。

从 React 16.0 开始，显然再次允许返回数组，只要每个元素都有一个 key ： 新的渲染返回类型：片段和字符串

React 16.2 允许您用 <Fragment>…</Fragment> 或什 <>…</> 围绕一个元素列表，如果您更喜欢数组： https ://reactjs.org/docs/fragments.html

原文由 Henrik N 发布，翻译遵循 CC BY-SA 4.0 许可协议