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

单线很好

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

render:function（）{
返回(
{[1,2,3].map（函数（n）{
返回{n}

}}
);
}

不适用于多行

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

render:function（）{
返回(
{[1,2,3].map（函数（n）{
返回(
项目{n}
说明{n}

)
}}
);
}

---

谢谢。

试着把标签想象成函数调用（请参阅）。然后第一个标签变成：

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

第二个：

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

现在应该清楚的是，第二个代码片段没有真正意义（在JS中不能返回多个值）。您必须将其包装在另一个元素中（很可能是您想要的，这样您还可以提供有效的

键
属性），或者您可以使用如下内容：

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

使用JSX sugar：

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

{[1,2,3]。映射（函数（n）{
返回([
，//注意逗号

]);
})}

您不需要展平生成的数组，React会为您做到这一点。请参见以下内容。再次说明：从长远来看，将这两个元素包装到div/节中可能会更好。
关于返回数组的旧答案似乎不再适用（可能是因为React~0.9，如@dogmatic69所述）

假设您需要返回单个节点：

JSX根节点的最大数量

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

不要忘记JSX编译成常规JS；返回两个
函数在语法上没有真正的意义。同样，不要把
三元结构中的多个孩子

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

在我的例子中，我想返回多个
s。我将它们包装在一个
中–一个表允许有多个实体

编辑：从React 16.0开始，显然允许再次返回数组，只要每个元素都有一个
键
：

编辑：React 16.2允许您使用
..
甚至
..
包围元素列表，如果您更喜欢数组：
您可以在此处使用
createFragment


与Jan Olaf Krems的解决方案相比的优势：react不会抱怨缺少
键
此外，您可能希望在react组件内的某个助手函数中返回多个列表项。只需返回一个带有
键
属性的html节点数组：

import React, { Component } from 'react'

class YourComponent extends Component {
  // ...

  render() {
    return (
      <ul>
        {this.renderListItems()}
      </ul>
    )
  }      

  renderListItems() {
    return [
      <li key={1}><a href="#">Link1</a></li>,
      <li key={2}><a href="#">Link2</a></li>,
      <li key={3} className="active">Active item</li>,
    ]
  }
}

import React，{Component}来自“React”
类YourComponent扩展组件{
// ...
render（）{
返回(

{this.renderListItems（）}

)
}      
renderListItems（）{
返回[
，
，
活动项，
]
}
}
已更新
使用React Fragment。它很简单。可以对文档进行分段

render() {
  return (
    <>
    {[1,2,3].map((value) => <div>{value}</div>)}
    </>
  );
}

从React v16.0.0开始，可以通过将多个元素包装在
数组中来返回它们

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

根据文件：

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

功能词汇表（道具）{
返回(
{props.items.map（item=>(
//如果没有“键”，React将触发键警告
{item.term}
{item.description}
))}
);
}

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

通过React fragment
和
React，它很简单。fragment
：

return (
    <>
      {[1, 2, 3].map(
        (n, index): ReactElement => (
          <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
          </React.Fragment>
        ),
      )}
    </>
  );

返回(
{[1,2,3].地图(
（n，索引）：元素=>(
项目{n}
说明{n}

),
)}
);
Yep实际上使用return（[…]）清楚地记录了如果没有展平位，我会得到我想要的标记，虽然返回的数组一定没有展平，但在我的特殊情况下，它不会影响最终输出。或者是吗？谢谢！TIL！更新我的答案，以包含指向JSFIDLE的链接，显示展平是可选的。还将包含指向React文档的链接。这不再有效r工作（从0.9ish开始）
Uncaught错误：不变冲突：Product.render（）：必须返回有效的ReactComponent。您可能返回了未定义的数组或其他无效对象。
@TimFletcher在呈现组件时可以返回数组，例如
{this.props.foos.map（function（）{return}}
。但是组件的
render
函数在不包装数组的情况下（例如，在div中）无法返回该数组。有关此特定问题的详细信息：not
return（“asdf”“asdf”）；
您想要
return[“asdf”，“asdf”]
如果你想返回多个
，你能做些什么？假设我不能把它全部打包成
@Banjocat，恐怕我不知道：/你可以嵌套列表，这样你就可以返回像
一个
两个
这样的东西，如果在你的情况下行得通的话。或者：一个打包div可以严格来说不是有效的，但可能在所有相关的浏览器中都会呈现良好效果？如果您尝试，请告诉我们。@Banjocat…我很想知道您的问题的更好答案。也许您应该将其作为一个常规的堆栈溢出问题，看看是否得到不同的答案。@user1175849也许您可以发布该问题：）@HenrikN Fwiw，包装一个
span
或
div
中
li
的“子集”没有
npm install react-composite --save

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

render() {
  return (
    {[1,2,3].map(function (n, index) {
      return (
        <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
        </React.Fragment>
      )
    }}
  );
}

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

return (
    <>
      {[1, 2, 3].map(
        (n, index): ReactElement => (
          <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
          </React.Fragment>
        ),
      )}
    </>
  );