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

Detecting if a child component has a specific mixin/method in React.js

本文关键字：mixin 方法 是否 js React 检测 组件      更新时间：2023-09-26

在组件的渲染方法中，我需要通过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>
        );
    }
});

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

是不是我误会了什么？我还尝试过将我的mixin方法声明为静态方法，如下所示：

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

如有任何帮助，我们将不胜感激。

编辑：

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

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

使用以下项签入渲染函数：child.props.isBar()。然而，这似乎不是正确的方法。

我制作了一个小库来处理Children结构，这可能对您的问题很方便。如果需要的话，你甚至可以和深孩子打交道。您可以在此处获取：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>;
};

TL；DR如果你的问题是根据孩子们访问mixin，那么不要阅读，我可能误解了你的问题：（否则，关于mixin的一些事情会降低…

你应该坚持使用mixin的原始形式。我认为，使用mixin的最佳用例是代码共享。所以我假设，您在代码中使用了一些模块系统，需要mixin。如果是这样的话，你可以像这样使用：

var Foo = React.createClass({
    mixins: [fooMixin],
    render: function() {
        console.log(this.isBar()); // using the mixin
        return (
            <div>
                Something
            </div>
        );
    }
});

我创建了一个示例来演示其用法。

define('fooMixin', {
  isBar: function() {
    return 'Something';
  }
});
require(['fooMixin'], function(fooMixin) {
  var Foo = React.createClass({
    mixins: [fooMixin],
    render: function() {
      
      var div = React.createFactory('div');
      return div(null, this.isBar());
    }
  });
  React.render(Foo(), document.getElementById('content'));
});
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
<div id="content"></div>

还可以在JSFiddle上看到带有JSX的样本->http://jsfiddle.net/8hby56sa/

希望能有所帮助。

相关文章：