Question

Facebook ReactJS库对which component methods can be overridden and how有严格的规定。除非是specifically allowed，否则我们无法重新定义方法。

对于我的自定义mixins，如果我有一个允许覆盖的方法，如何更新SpecPolicy？这甚至可能吗？

这个例子有点做作，但它应该得到重点。假设我有下面的mixin试图提供一个默认的renderItem方法，如果有必要，打算覆盖它。当我尝试渲染组件<Hello ... />时，出现Invariant Violation错误。您可以找到a jsfiddle here。

var MyMixin = {
    render: function () {
        return this.renderItem();
    },
    renderItem: function () {
        return <div>Hello {this.props.name}</div>;
    }
};

var Hello = React.createClass({
    mixins: [MyMixin],
    renderItem: function() {
        return <div>Hey {this.props.name}</div>;
    }
});

Answer 1

现在这是不可能的。未来版本的React很可能会有一些利用ES6类的mixin，并且会更加灵活。请参阅此处了解提案：

https://github.com/reactjs/react-future/blob/master/01%20-%20Core/02%20-%20Mixins.js

Answer 2

您可以使用类似jQuery extend的内容来扩展传递给React.createClass的对象，而不是使用mixin - 这样您就可以在需要时仍然使用Mixins，并且需要时使用此方法（JS Fiddle）：

/** @jsx React.DOM */

var MyMixin = {
    render: function () {
        return this.renderItem();
    },
    renderItem: function () {
        return <div>Hello {this.props.name}</div>;
    }
};

var Hello = React.createClass($.extend(MyMixin, {
    renderItem: function() {
        return <div>Hey {this.props.name}</div>;
    }
}));

React.renderComponent(<Hello name="World" />, document.body);

Answer 3

mixin可以访问组件属性和状态。您可以在mixin中使用多个实现，并根据属性/状态使用您需要的实现。

您只想确保使用mixin的组件具有这些属性/状态或具有默认实现。

Answer 4

在情况下，当我需要为mixin提供一些属性时，这取决于我的反应类，我将mixin作为一个带有所需参数的函数，返回mixin对象

//mixin.js
module.exports = function mixin(name){
  return {
    renderItem(){
      return <span>name</span>
    }
  };
}

//react-class.js
var myMixin = require('mixin');
module.exports = React.createClass({
    mixins:[myMixin('test')],
    render(){
        return this.renderItem();
    }
});
//result
<span>test</test>

是否可以定义一个可以在React组件中重写的ReactJS Mixin方法？

4 个答案: