当使用多个 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

需要（）方法。

被调用时，它应该检查一下。

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 Docs