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

javascript reactjs

2022-08-30 05:16:36

一行工作正常：

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

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

{[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/部分可能会更好。

答案 2

Jan Olaf Krems关于返回数组的答案似乎不再适用（也许因为React~0.9，正如@dogmatic69在评论中所写的那样）。

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

JSX 根节点的最大数量

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

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

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

在我的情况下，我想返回多个s。我把它们包裹在一个 - 一张桌子允许有多个身体。<tr><tbody>

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

React 16.2 允许您将元素列表括起来，甚至，如果您更喜欢数组：https://reactjs.org/docs/fragments.html<Fragment>…</Fragment><>…</>