blocks|key|4619347|text|现在这是不可能的。React的未来版本很可能会有利用ES6类的mixins，并且会更加灵活。请参阅此处以获取建议：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4619348|https://github.com/reactjs/react-future/blob/master/01%2520-%2520Core/02%2520-%2520Mixins.js|offset|length|4619349|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/reactjs/react-future/blob/master/01%2520-%2520Core/02%2520-%2520Mixins.js^0|0|0|2C|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>This isn't possible right now. It's likely that a future version of React will have mixins that take advantage of ES6 classes and will be a bit more flexible. See here for a proposal:</p>

<p><a href="https://github.com/reactjs/react-future/blob/master/01%20-%20Core/02%20-%20Mixins.js">https://github.com/reactjs/react-future/blob/master/01%20-%20Core/02%20-%20Mixins.js</a></p>


blocks|key|113189|text|你可以只使用像jQuery+extend这样的东西来扩展传递给React.createClass的对象，而不是使用mixin+-这将允许你在需要的时候仍然使用mixin，并在需要的时候使用这个方法(JS+Fiddle)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|113190|/**+@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);|code-block|syntax|javascript|113191|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jquery.extend/|1|https://jsfiddle.net/jserndqt/^0|V|H|7|D|0|2R|9|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

<p>You could just use something like <a href="http://api.jquery.com/jquery.extend/" rel="nofollow">jQuery extend</a> to extend the object that's passed to <code>React.createClass</code>, instead of using a mixin - this would allow you to still use Mixins when you want, and use this method when you need to (<a href="https://jsfiddle.net/jserndqt/" rel="nofollow">JS Fiddle</a>):</p>

<pre><code>/** @jsx React.DOM */

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

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

React.renderComponent(&lt;Hello name="World" /&gt;, document.body);
</code></pre>


blocks|key|4619405|text|如果你仍然想要一个默认的rednerItem实现，也许你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4619406|var+MyMixin+=+{
++render:+function+()+{
++++return+this.renderItem();
++},
++renderItem:+function+()+{
++++var+customRender+=+this.customRenderItem;
++++return+customRender+!=+undefined+?+customRender()+:+<div>Hello+{this.props.name}</div>;
++}
};

var+Hello+=+React.createClass({
++++mixins:+[MyMixin],
++++customRenderItem:+function()+{
++++++return+<div>Hey+{this.props.name}</div>;
++++}
});|code-block|syntax|javascript|4619407|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Maybe you can do something like this if you still want a default rednerItem implementation: </p>

<pre><code>var MyMixin = {
  render: function () {
    return this.renderItem();
  },
  renderItem: function () {
    var customRender = this.customRenderItem;
    return customRender != undefined ? customRender() : &lt;div&gt;Hello {this.props.name}&lt;/div&gt;;
  }
};

var Hello = React.createClass({
    mixins: [MyMixin],
    customRenderItem: function() {
      return &lt;div&gt;Hey {this.props.name}&lt;/div&gt;;
    }
});
</code></pre>


blocks|key|4619425|text|mixin可以访问组件属性和状态。您可以在mixin中有多个实现，并根据属性/状态使用所需的实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4619426|您唯一想要确保使用mixin的组件具有这些属性/状态或具有默认实现。|4619427|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>The mixin has access to the component properties and state. You can have multiple implementations in the mixin and use the implement you need based on the properties/state.</p>

<p>Only thing you want to make sure that the components using the mixin have these properties/state or have a default implementation.</p>


blocks|key|4619455|text|在这种情况下，当我需要为mixin提供一些属性时，这取决于我的react类，我将mixin作为一个带有所需参数的函数，返回mixin对象|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4619456|//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>|code-block|syntax|javascript|4619457|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In situation, when i need to provide some properties to mixin, that depends on my react class, i make mixin as a function with needed arguments, that return mixin object</p>

<pre><code>//mixin.js
module.exports = function mixin(name){
  return {
    renderItem(){
      return &lt;span&gt;name&lt;/span&gt;
    }
  };
}

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


<p>The Facebook ReactJS library has strict rules about <a href="https://github.com/facebook/react/blob/0c6bee049efb63585fb88c995de788cefc18b789/src/core/ReactCompositeComponent.js#L47">which component methods can be overridden and how</a>. Unless it's <a href="https://github.com/facebook/react/blob/0c6bee049efb63585fb88c995de788cefc18b789/src/core/ReactCompositeComponent.js#L407">specifically allowed</a>, we cannot redefine a method.</p>

<p>For my custom mixins how can I update the SpecPolicy if I have a method I want to allow to be overridden? Is this even possible?</p>

<p>This example is a bit contrived but it should get the point across. Say I have the mixin below which is trying to provide a default <code>renderItem</code> method, intended to be overridden if necessary. When I attempt to render the component <code>&lt;Hello ... /&gt;</code> I get an <code>Invariant Violation</code> error. You can find <a href="http://jsfiddle.net/somethingkindawierd/xz9RR/">a jsfiddle here</a>.</p>

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

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


Is it possible to define a ReactJS Mixin method that can be overridden in a React Component?

Facebook的ReactJS库对有严格的规定。除非它是，否则我们不能重新定义方法。对于我的自定义混入，如果我有一个我想要重写的方法，我该如何更新SpecPolicy呢？这有可能吗？这个例子有点做作，但它应该能让人明白这一点。假设我有下面的mixin，它试图提供一个默认的renderItem方法，如果需要的话，它将被...

问是否可以定义一个可以在React组件中覆盖的ReactJS Mixin方法？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以定义一个可以在React组件中覆盖的ReactJS Mixin方法？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以定义一个可以在React组件中覆盖的ReactJS Mixin方法？
EN