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

通过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>
        ),
      )}
    </>
  );

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

键是唯一可以传递给Fragment的属性。将来，我们可能会增加对其他属性（例如事件处理程序）的支持。

似乎有关返回数组的旧答案不再适用（也许自从React〜0.9以来，就像@ dogmatic69在评论中所写的那样））。

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

JSX根节点的最大数量

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

不要忘记JSX可以编译为常规JS。返回两个函数实际上并没有语法意义。同样，三元组不要放一个以上的孩子。

在很多情况下，你可以简单地换东西在一个<div>或<span>。

就我而言，我想返回多个<tr>。我把它们包在一个<tbody>桌子中-允许它具有多个主体。

编辑：从React 16.0开始，显然再次允许返回数组，只要每个元素都有一个key：https : //facebook.github.io/react/blog/2017/09/26/react-v16.0.html ＃new-render-return-types片段和字符串

编辑：React 16.2允许您使用<Fragment>…</Fragment>甚至包围元素列表<>…</>，如果您更喜欢数组：https : //blog.jmes.tech/react-fragment-and-semantic-html/

尝试将标签视为函数调用（请参阅docs）。然后第一个变为：

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

第二个：

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

现在应该清楚，第二个片段实际上没有任何意义（在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/。再说一遍：从长远来看，将这两个元素包装到div / section中将很可能会更好。