我想为工具提示编写一个简单的mixin。我已经知道如何将我的mixin绑定到DOM事件：
componentDidMount: function() {
var el = this.getDOMNode();
el.addEventListener('mouseenter', this.mouseenter, false);
el.addEventListener('mouseleave', this.mouseleave, false);
},
...但是我想绑定到React事件，以利用其一致的事件系统。我该怎么做？
我认为您可能想render通过使用mixinmouseenter和mouseleavehandler作为道具，在混合组件的方法中执行此操作。我认为一种选择可能看起来像这样：
var MouseMixin = {
getMouseProps: function() {
return {
onMouseEnter: this.mouseenter,
onMouseLeave: this.mouseleave
}
},
mouseenter: function() {
console.warn('mouseenter', arguments)
},
mouseleave: function() {
console.warn('mouseleave', arguments)
}
};
然后，除了将其混入之外，还需要应用行为。在React 0.12中的JSX中，您可以使用...传播运算符来帮助解决此问题：
var Example = React.createClass({
mixins: [MouseMixin],
render: function() {
return (
<div { ...this.getMouseProps() }>
Hello world
</div>
)
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句