javascript - Concat ReactElements渲染

我在React中有一个非常简单的If组件：

'use strict';

var React = require('react');

module.exports = React.createClass({
    render: function () {
        if (this.props.condition) {
            return this.props.children;
        }
        return false;
    }
});

我可以这样称呼它：

<If condition={someLogic}>
    <div>Hi there</div>
</If>

问题是如果我在If组件内有多个标签：

<If condition={someLogic}>
    <div>Container 1</div>
    <div>Container 2</div>
</If>

这给我一个错误：


  未捕获的错误：始终违规：exports.render（）：有效
  必须返回ReactComponent。您可能返回了undefined，
  数组或其他无效对象。


这里的this.props.condition是ReactElement的数组。

问题：如何合并一个ReactElement数组并仅返回一个？

注意：我意识到我可以将这两个divs都放在一个包装中，但是出于这个示例（以及我的实际问题）的考虑，我们不能这样做，并且必须返回多个标签

最佳答案

React不支持从渲染返回多个组件。渲染方法必须返回一个元素-您可以看到问题https://github.com/facebook/react/issues/2127和https://github.com/facebook/react/issues/2191

解决方案是用一些元素包装props.children，例如

var If = React.createClass({
  render: function () {
    if (this.props.condition) {
      return <div>{this.props.children}</div>;
    }
    return false;
  }
});