比较两个组件-组件X是组件A的实例吗

Question

我有一个通用组件，该组件将其子组件映射为仅过滤某种类型的子组件，如下所示。

但是，使用该属性type只是一个猜测，我找不到记录。不仅如此，对其进行日志记录表明它是一个函数-
无法执行。最重要的是，使用Browserify时需要解决几个问题。

另一种选择是读取child.prototype.displayName。但这也感觉不对。

问题：基本上，我正在寻找一种比较两个ReactJS组件是否相等的可靠方法。

例

（更新：毕竟还算不错）

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

var Bar = React.createClass({
    render: function() {
        return <div>Bar</div>;
    }
});

var Main = React.createClass({
    render: function() {
        var filteredChildren = [];

        filteredChildren = React.Children.map(function(child) {
            if (child.type === Foo.type) {
                return child;
            }
        });

        return (
            <div>
                {filteredChildren}
            </div>
        );
    }
});

React.render(<Main><Foo /><Bar /></Main>, document.body);

Answer 1

我认为您的例子是正确的。

实际上，在React 0.12中child.type === Foo.type是唯一可行的比较。
这与React
0.12正在弃用包装函数有关。

当0.13输出时，child.type其本身将为Foo。

Nitpick：请不要使用this.props.children.map，当孩子少于两个时，这将不起作用。
使用React.Children.map代替。