ES6 classes and the use of mixins

[jbrantly]

With React v0.13 the use of ES6 classes will be available. According to facebook/react#1380 mixins will not be magically supported for ES6 classes like they are today with createClass. With React Router v0.9 taking away the RouteStore methods and making them only available via mixins, are there any plans for supporting React Router with ES6 classes once v0.13 lands?

[josebalius]

+1

[ryanflorence]

Of course :)

Though, Sebastian just said at ReactConf "keep using mixins until there is a better solution".

We haven't explored any alternatives to mixins, so we'll keep using them until then, but like React, we don't want to prescribe an object model either.

[edygar]

I think it could keep existing anyway. The way I would use would be something like this:

*Obs: Borrowed State Mixin the example from docs.

import mixin from './utils';
import React from 'react';
import Router from 'react-router';
const {State, Link} = Router;

export default class Tab extends mixin(React.Component, State) {
  render() {
    let isActive = this.isActive(this.props.to, this.props.params, this.props.query);
    let className = isActive ? 'active' : '';
    let link = (
      <Link {...this.props} />
    );
    return <li className={className}>{link}</li>;
  }
}

[badsyntax]

@edygar can you share the code in your mixin() function?

[gilbox]

fwiw, here is a simplistic implementation of Mixin that works similar to what edygar posted above:

assign = require('object.assign');

module.exports.Mixin = function Mixin(...mixins) {
  var Class = function(...args) {
    mixins.forEach((mixin) =>
      mixin.constructor && mixin.constructor.call(this, ...args)
    );
  };

  assign(Class.prototype, ...mixins);

  return Class;
};

You pass in regular javascript objects and it will treat the property constructor like actual class constructors.

Of course, this implementation does not include all of that React magic that merges lifecycle methods. In most cases I think we should avoid using mixins with lifecycle methods. That said, I still use React.createClass and some mixins with lifecycle methods.

[kidwm]

@ryanflorence so how to handle this with ES6 Class after react-router 1.0? or should I just write a decorator to do the mixin functions with Babel?