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

reactjs

Solution

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

Problem

The Facebook ReactJS library has strict rules about which component methods can be overridden and how. Unless it's specifically allowed, we cannot redefine a method. 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? 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 `renderItem` method, intended to be overridden if necessary. When I attempt to render the component `<Hello ... />` I get an `Invariant Violation` error. You can find 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>; } }); ```

Original source