如何在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