reactjs - 当多个 React DOM 组件在没有外部 div 的情况下使用时，JSX 将无法编译

Question

考虑这个不会编译的例子：

/** @jsx React.DOM */

var Hello = React.createClass({
  render: function() {
    return <div>Hello</div>;
  }
});

var World = React.createClass({
  render: function() {
    return <div>World</div>;
  }
});

var Main = React.createClass({
  render: function() {
    return (
        <Hello />
        <World /> 
    );
  }
});

React.renderComponent(<Main />, document.body);

但是这些组合中的任何一个都有效：

<div>
 <Hello />
 <World />
</div>

 <Hello />
 //<World />

 //<Hello />
 <World />

想知道多个组件是否应该始终被 div 标签包围。

Answer 1

我认为渲染函数应该只返回一个组件。

来自文档： http: //facebook.github.io/react/docs/component-specs.html

render() 方法是必需的。

调用时，它应该检查 this.props 和 this.state 并返回单个子组件

Answer 2

有一个简单的方法可以绕过这个限制：

var Hello = React.createClass({
  render: function() {
    return <div>Hello</div>;
  }
});

var World = React.createClass({
  render: function() {
    return <div>World</div>;
  }
});

var HelloWorld = [Hello, World];

var Main = React.createClass({
  render: function() {
    return (
        {HelloWorld}
    );
  }
});

React.renderComponent(<Main />, document.body);

Answer 3

React 组件只能渲染单个根节点。如果要返回多个节点，则必须将它们包装在单个根中。

如官方 React 网站上所述：React Docs