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