试着把标签想象成函数调用(参见 文件) ，然后第一个变成:

{[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>
]);
})}

您不需要压平结果数组。你的反应就是这样。参见下面的小提琴 http://jsfiddle.net/mEB2V/1/。再次强调: 从长远来看，将这两个元素包装到 div/section 中可能会更好。

返回数组的 Jan Olaf Krems 的回答似乎不再适用(可能是因为 React ~ 0.9，正如@dogmatic69在 评论中所写的那样)。

文档 说明需要返回单个节点:

Maximum Number of JSX Root Nodes

当前，在组件的呈现中, you can only return one node; if you have, say, a list of divs to 返回，则必须将组件包装在 div、 span 或任何其他 组件。

不要忘记 JSX 编译成普通的 JS; 返回两个 函数实际上没有句法意义。同样，不要把 三胞胎中有一个以上的孩子。

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

在我的例子中，我希望返回多个 <tr>。我把它们包装在一个 <tbody>中-一个表允许有多个主体。

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

React 16.2 lets you surround a list of elements with <Fragment>…</Fragment> or even <>…</>, if you prefer that to an array: https://reactjs.org/docs/fragments.html

你可以在这里使用 createFragment，参见 关键片段 。

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 的解决方案上: React 没有抱怨丢失的 key。

另外，您可能希望在 React 组件的某个 helper 函数中返回几个列表项。返回一个带有 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>,
]
}
}

更新

使用反应片段。这很简单。 Link片段文档。

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

旧答案，过时了

当反应大于16时，你可以使用 反应-复合反应。

import { Composite } from 'react-composite';


// ...


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

Of course, react-composite has to be installed.

npm install react-composite --save

从 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 的额外节点。

使用显式 < 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>
);
}

Key 是唯一可以传递给片段的属性 将来，我们可能会添加对其他属性的支持，例如事件 负责人。

It is simple by React fragment <></> and React.Fragment:

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

如果您不在当前项目文件夹上，或者当前所在的文件夹包含多个项目，则可能会出现此错误。

I had a similar error and once switched to a current project folder and run, the issue is gone.