比较两个组件 - 组件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改用.