decorator around mixins

I saw the deprecation warnings for using mixins are reverted with 0.13.3, so the official story is now to use mixins, always. I think it’d be nice to also support ES6 classes and not force everyone to use mixins in their code if they’d prefer not to.

I came up with a first draft on how it could be implemented by reusing the mixin internally and exposing a decorator function.

https://jsfiddle.net/ksmth/t34ak1q3/10/

// ES7
@routerState
class MyComopnent extends React.Component {
    // ...
}

// ES6
class MyComopnent extends React.Component {
    // ...
}
MyComopnent = routerState(MyComopnent);

// React.createClass without mixins
var MyComopnent = React.createClass({
    // ...
});
MyComopnent = routerState(MyComopnent);

[juhaelee]

I think @taurose makes a good point about the breaking refs and animations. HoC might solve one problem, but it could cause more problems as well. Is the best way to access the router methods for an ES6 class is through the contextType class property?

Component.contextTypes = {
  router: PropTypes.func.isRequired
};

Then to access router methods, this.context.router.[method]

[agundermann]

Thanks for sharing 👍

I wonder if it wouldn’t be preferable to use class inheritance though, in order to avoid the extra wrapper component which breaks refs and animations.

Something like

var stateDecorator = (Component) => {
  class Derived extends Component {}

  Object.assign(Derived.prototype, StateMixin); 
  return Derived;
}