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

尝试将标记视为函数调用（请参阅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很可能是长期更好的。

Answer 2

似乎关于返回数组的旧答案不再适用（可能因为React~0.9，正如@ dogmatic69在a comment中写的那样）。

The docs说你需要返回一个节点：

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-fragments-and-strings

，就可以再次返回一个数组

编辑：如果您喜欢使用https://blog.jmes.tech/react-fragment-and-semantic-html/

，则使用React 16.2可以将<Fragment>…</Fragment>甚至<>…</>的元素列表包围起来

Answer 3

从 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>
  );
}
key是唯一可以传递给Fragment的属性。在里面未来，我们可能会添加对其他属性的支持，例如事件处理程序。

Answer 4

此外，您可能希望在React组件内的某个辅助函数中返回多个列表项。只需返回一个带有key属性的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>,
    ]
  }
}

Answer 5

您可以在此处使用createFragment。

https://src.chromium.org/viewvc/blink?view=revision&revision=178925

import createFragment from 'react-addons-create-fragment';
...
{[1,2,3].map((n) => createFragment({
    h: <h3>...</h3>,
    p: <p>...</p>
  })
)}

（在这里使用ES6和JSX语法）

首先必须添加react-addons-create-fragment包：

npm install --save react-addons-create-fragment

优于Jan Olaf Krems的解决方案：反应不会抱怨失踪key

Answer 6

使用React＆gt; 16你可以使用react-composite。

import { Composite } from 'react-composite';

// ...

{[1,2,3].map((n) => (
  <Composite>
    <h2>Title {n}</h2>
    <p>Description {n}</p>
  </Composite>
))};

当然，必须安装反应复合材料。

npm install react-composite --save

Answer 7

通过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的另一个return语句中返回多行JSX？

7 个答案: