如何在React的另一个return语句中返回多行JSX？
单行工作正常
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,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 /部分将最有可能是更好的长期。
似乎关于返回一个数组的旧的答案不再适用（也许从React〜0.9，因为@ dogmatic69在评论中写道）。
文档说你需要返回一个单一的节点：
最大数量的JSX根节点
目前，在一个组件的渲染中，你只能返回一个节点; 如果您有要返回的div列表，则必须将组件包装在div，span或任何其他组件中。
不要忘记，JSX编译成普通的JS; 返回两个函数实际上并没有语法上的意义。 同样，不要把一个以上的孩子放在三元组中。
在许多情况下，您可以简单地将东西包装在<div>或<span> 。
在我的情况下，我想返回多个<tr> s。 我把它们包装在一个<tbody> – 一个表允许有多个主体。
编辑：从React 16.0开始，只要每个元素都有一个key ，返回一个数组显然是允许的： https ： //facebook.github.io/react/blog/2017/09/26/react-v16.0。 HTML＃新的渲染回报types片段和串
此外，您可能想要在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>, ] } }
你可以在这里使用createFragment 。
https://facebook.github.io/react/docs/create-fragment.html
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的解决scheme的优势：反应不会抱怨丢失的key
