2つのコンポーネントの比較 - コンポーネントXのコンポーネントAのインスタンス

Question

私は、下にあるように、その子コンポーネントをマップして特定のタイプの子のみをフィルタリングする汎用コンポーネントを持っています。

しかし、typeというプロパティを使用したのは単なる推測でしたが、私はそれがわかりません。それだけでなく、ロギングはそれが実行不可能な機能であることを示します。それに加えて、Browserifyを使用する際に回避しなければならない問題がいくつかあります。

もう1つの方法は、child.prototype.displayNameを読み取ることです。しかし、それも間違っていると感じます。

質問：基本的に、私は2つの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でしか動作しません。
これは、反応中の0.12がdeprecating wrapper functionsのプロセスに関連しています。

0.13が外になると、child.type自体はFooになります。

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