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

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


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:

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


You could just use something like jQuery extend to extend the object that's passed to React.createClass, instead of using a mixin - this would allow you to still use Mixins when you want, and use this method when you need to (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);


Maybe you can do something like this if you still want a default rednerItem implementation:

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>;    }});