赵走x博客 - 开发者的网上家园

26、在JSX 中返回多个节点

资源编号:76076 书籍 React快速上手开发热度：83

render() 函数必须返回单个顶层结点，不允许返回两个顶层结点。

render() 函数必须返回单个顶层结点，不允许返回两个顶层结点。换句话说，以下代码会导致错误：
```
// 语法错误：
// 相邻的JSX元素必须包裹在一个闭合标签中
var Example = React.createClass({
	render: function() {
		return (
			<span>
				Hello
			</span>
			<span>
				World
			</span>
		);
	}
});
```
这个问题很容易解决，只要把所有结点包裹在另一个组件中即可，比如`<div>`：
```
var Example = React.createClass({
render: function() {
	return (
		<div>
			<span>
				Hello
			</span>
			<span>
				World
			</span>
		</div>
);
}
});
```
虽然不能在render 方法中返回一个结点数组，但是可以在变量中使用数组，只需要给数组中的结点添加合适的key 属性即可：
```
var Example = React.createClass({
	render: function() {
		var greeting = [
				<span key="greet">Hello</span>,
				' ',
				<span key="world">World</span>,
				'!'
		];
		return (
			<div>
				{greeting}
			</div>
		);
	}
});
```
值得注意的是，你还可以在数组中混入空格与其他字符串，并且不需要给它们添加key属性。

在某种程度上，这类似于从父组件接收任意数量的参数，并通过render() 函数进行传播：
```
var Example = React.createClass({
	render: function() {
			console.log(this.props.children.length); // 4
			return (
					<div>
							{this.props.children}
					</div>
			);
		}
	});
React.render(
		<Example>
			<span key="greet">Hello</span>
			{' '}
			<span key="world">World</span>
			!
			</Example>,
document.getElementById('app')
);
```