ReactJS Mixin Method Override
How can I create a method on a ReactJS Mixin such that I'm allowed to override it in the Component definition?
by Jon Beebe
HTML
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
/** @jsx React.DOM */
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>;
}
});
React.renderComponent(<Hello name="World" />, document.body);
// Notice in the console an error is logged:
/*
Uncaught Error: Invariant Violation: ReactCompositeComponentInterface: You are attempting to define `renderItem` on your component more than once. This conflict may be due to a mixin.
*/