javascript - 检测子组件在 React.js 中是否具有特定的 mixin/方法

Question

在我的组件的渲染方法中，我需要过滤 props.children变量寻找具有特定方法或属性的组件，但我无法在子组件上公开任何方法或属性。我想让该方法从 mixin 继承。

示例:

var barMixin = {
    isBar: function() { return true; }
};

var Foo = React.createClass({
    render: function() {
        var filteredChildren = this.props.children.filter(function(child) {
            return child.isBar();
        });
        return (
            <div>
                {filteredChildren}
            </div>
        );
    }
});

不幸的是，这个例子不起作用，因为 child.isBar是 undefined即使子组件继承了 mixin barMixin .

我是不是有什么误解？我还尝试将我的 mixin 方法声明为静态方法，如下所示:

var barMixin = {
    statics: {
        isBar: function() { return true; }
    }
};

任何帮助将不胜感激。

编辑:

我找到了一个可行的解决方案:

var barMixin = {
    getDefaultProps: function() {
        return {
            isBar: function() { return true; }
        };
    }
};

检查渲染函数:child.props.isBar() 。但是，这似乎不是执行此操作的正确方法。

Answer 1

我制作了一个小型库来处理 Children 结构，这可能对您的问题很方便。如果需要的话，你甚至可以处理深度 child 。您可以在这里获取:https://github.com/fernandopasik/react-children-utilities .

import React from 'react';
import Children from 'react-children-utilities';

function isBar(child) { return true; }

function Foo(props) {
    return <div>{Children(this.props.children).filter(isBar)}</div>;
};