比较两个组件——组件 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 是唯一有效的比较。
这与 deprecating wrapper functions.

中的 React 0.12 有关

当 0.13 出来时，child.type 本身将是 Foo。

挑剔：不要使用 this.props.children.map、this won't work when there is less than two children。
请改用 React.Children.map。

Answer 2

您制作的 api 类型脆弱且令人困惑。您不应将元素视为数据。如果需要过滤，将数据传递给组件。

<Main things={[
  {type: 'Foo', element: <Foo />},
  {type: 'Bar', element: <Bar />},
  {type: 'Bar', element: <div>I'm lying but it doesn't matter</div>},
]} />

var Main = React.createClass({
    render: function(){
        var filteredChildren = this.props.things.map(function(thing){
            return thing.type === 'Foo' ? thing.element : false;
        });

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

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

Comparing two components - is Component X an instance of Component A

javascript

reactjs