当没有外部div使用多个React DOM组件时,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并返回一个子组件