So sánh hai thành phần - là thành phần X một thể hiện của thành phần A

Question

Tôi có một thành phần chung để ánh xạ các thành phần con của nó để chỉ lọc các trẻ em thuộc một loại nhất định, như được tìm thấy bên dưới.

Tuy nhiên, việc sử dụng thuộc tính type chỉ là phỏng đoán và tôi không thể tìm thấy tài liệu đó. Không chỉ vậy, việc ghi lại nó cho thấy nó là một hàm - mà không thể thực hiện được. Trên hết, có một số vấn đề cần được giải quyết khi sử dụng Browserify.

Một tùy chọn khác là đọc child.prototype.displayName. Nhưng điều đó cũng cảm thấy sai.

Câu hỏi: Về cơ bản, tôi đang tìm một cách chắc chắn để so sánh xem hai thành phần ReactJS có bình đẳng không.

VÍ DỤ

(Cập nhật: không phải là xấu sau khi tất cả)

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

Tôi nghĩ rằng ví dụ của bạn là đúng.

Thật vậy, trong React 0.12 child.type === Foo.type là so sánh duy nhất hoạt động.
Điều này liên quan đến React 0.12 đang trong quá trình deprecating wrapper functions.

Khi 0.13 hết, child.type chính nó sẽ là Foo.

Nitpick: không sử dụng this.props.children.map, this won't work when there is less than two children.
Sử dụng React.Children.map để thay thế.

Answer 2

Loại api bạn đang tạo ra là yếu và khó hiểu. Bạn không nên coi các phần tử là dữ liệu. Nếu bạn cần lọc, chuyển dữ liệu đến thành phần.

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