javascript - 连接 ReactElements 进行渲染

Question

我在 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>

这给了我一个错误:

Uncaught Error: Invariant Violation: exports.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

这里 this.props.condition 是一个 ReactElement 数组。

问题:如何连接一组 ReactElement 并仅返回一个？

注意:我意识到我可以将这两个 div 放入一个包装器中，但为了这个示例(以及我的实际问题)，我们可以这样说你不能这样做，并且你必须返回多个标签

Answer 1

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;
  }
});