Сравнение двух компонентов - это компонент X, экземпляр компонента A

У меня есть общий компонент, который отображает его дочерние компоненты для фильтрации только дочерних элементов определенного типа, как показано ниже.

Однако использование свойства 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);

Ответы

Ответ 1

Я думаю, что ваш пример верен.

Действительно, в React 0.12 child.type === Foo.type - единственное сравнение, которое работает.
Это связано с тем, что React 0.12 находится в процессе обесценивания функций обертки.

Когда значение 0.13 отсутствует, child.type будет Foo.

Nitpick: не используйте this.props.children.map, это не сработает, если осталось менее двух детей.
Вместо этого используйте React.Children.map.

Ответ 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>;
    }
});