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

时间:2015-01-07 16:57:50

标签: javascript reactjs

我有一个通用组件,它映射其子组件以仅过滤特定类型的子组件,如下所示。

但是,使用属性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);

2 个答案:

答案 0 :(得分:15)

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

事实上,在React 0.12中child.type === Foo.type是唯一可行的比较 这与React 0.12处于deprecating wrapper functions的过程有关。

当0.13结束时,child.type本身将为Foo

Nitpick:不要使用this.props.children.mapthis won't work when there is less than two children 请改用React.Children.map

答案 1 :(得分:3)

你正在做的那种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>;
    }
});