Confronto di due componenti - è Componente X un'istanza del Componente A

Question

Ho un componente generico che mappa i suoi componenti figlio per filtrare solo i bambini di un certo tipo, come trovato di seguito.

Tuttavia, l'utilizzo della proprietà type era una semplice ipotesi e non riesco a trovarlo documentato. Non solo, la registrazione mostra che si tratta di una funzione, che non può essere eseguita. Oltre a questo c'è un paio di problemi che devono essere risolti quando si utilizza Browserify.

Un'altra opzione potrebbe essere quella di leggere child.prototype.displayName. Ma anche questo sembra sbagliato.

Domanda: Fondamentalmente, sto cercando un modo solido per confrontare se due componenti ReactJS sono uguali.

ESEMPIO

(Aggiornato: non così male, dopo tutto)

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

Credo che il vostro esempio sia corretta.

Infatti, in React 0.12 child.type === Foo.type è l'unico confronto che funziona.
Questo è relativo a React 0.12 in corso di deprecating wrapper functions.

Quando 0.13 è spento, child.type sarà Foo.

Nitpick: non utilizzare this.props.children.map, this won't work when there is less than two children.
Utilizzare invece React.Children.map.

Answer 2

Il tipo di API che stai creando è fragile e confuso. Non dovresti trattare gli elementi come dati. Se è necessario filtrare, passare i dati al componente.

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