在组件的渲染方法中,我需要通过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/
希望能有所帮助。