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>

这给了我一个错误：

未捕获错误：不变违规：exports.render（）：有效必须返回ReactComponent。你可能已经返回undefined，a 数组或其他一些无效对象。

此处this.props.condition是ReactElement的数组。

问题：如何连接ReactElement数组并返回一个？

注意：我意识到我可以将这两个divs放在一个包装器中，但是为了这个例子（和我的实际问题），让我们说您不能这样做，并且您必须返回多个标签

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

Answer 2

另一种解决你想做的事情的解决方案（不是你要求的）是使用功能if：

function test (condition, result, alternative) {
  if (condition) {
    return result;
  } else {
    return alternative;
  }
}


<div>
  {test(a === b, <b>Equal</b>)}
</div>

这相当于三元运算符{a === b ? <b>Equal</b> : null}。

要呈现的Concat ReactElements

2 个答案: