为什么 ReactJS 中组件只能返回一个节点？ （有什么根本原因吗？）

来自文档：

JSX 根节点的最大数量

目前，在组件的渲染中， 只能返回一个节点；比如说，如果你有一个 div 列表 返回，您必须将组件包装在 div、span 或任何其他内容中 成分。

不要忘记 JSX 编译成常规 js；返回两个 函数实际上没有语法意义。同样，不要放置 三元组中有多个子项。

上面的解释说“当前”，这表明组件可能会返回一个函数，该函数会产生两个节点而不是一个节点。这只是一个技术限制，还是已经融入了哲学？

我是如何看待这个问题的：我正尝试使用 React 渲染 Bootstrap 菜单，而 Bootstrap 使用子选择器，而不是后代选择器，这是非常有意义的。

Aside:我如何解决我的特定问题：

我最感兴趣的是 React 的架构，但如果你好奇的话，这就是我的情况。

目前在 Bootstrap 中你可以制作一个下拉菜单：

<li role="presentation" class="dropdown pull-right">
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"> Menu <span class="caret"></span> </a>
    <div id="macroMenu" class="react-component">
        <ul class="macroInsertion dropdown-menu" role="menu">
            <li>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control search-filter" placeholder="Search" />
                    </div>
                </form>
            </li>
            <li>
                <a href="#">Menu 1</a>
            </li>
            <li>
                <a href="#">Menu 2</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">Menu 3</a>
            </li>
        </ul>
    </div>
</li>

默认的 Bootstrap 样式表具有 .pull-right > .dropdown-menu 和 .open > .dropdown-menu 等选择器，如果您在容器和包含的之间插入单个元素，则这些选择器不起作用。这是有道理的，因为它可能更快，而且 Bootstrap 有时可能会处理双重嵌套选择器，但它破坏了我们的系统，因为中间有 .react-component 。

就我而言，我手动找出了 .react-component 所破坏的内容，并创建了新样式来解释缺失的行为。

目前这是一个技术限制。然而，已经有一些（随意的）讨论允许这样做：

var Foo = React.createClass({
  render(){
    return [<Bar />, <Baz />];
  }
});

var Quux = React.createClass({
  render(){
    return <div><span /><Foo /></div>;
  }
});

And <Quux />会产生这样的结构：

<div>
    <span />
    <Bar />
    <Baz />
</div>

这对于处理 HTML 中的一些僵化问题（表格、列表、头部）非常有用，对于兄弟姐妹重要的样式（例如display: inline-block）或者您无法控制样式和直接子项（>) 或兄弟选择器 (~ or +）被使用。

如果您确实遇到了其中一种情况，那么您很可能只是实现了渲染，因此使用实用程序函数而不是组件将是一个很好的解决方法。

var Foo = function(props){
    return [<Bar />, <Baz />];
}

var Quux = React.createClass({
  render(){
    return <div>{flatten( <span />, Foo({}) )}</div>;
  }
});


// usually you get this from underscore or similar
var flatten = function(){ return Array.prototype.reduce.call(arguments, function(acc, x){ return acc.concat(x) }, []) };