React v0.13から使えるようになったES6のclass構文でmixinを使う

React v0.13からES6のclass構文で書けるようになった

以前はReact.createClassを使ったReact独自の方法でClassを表現していたのですが、v0.13からはES6の構文で書けるようになりました。

Before (React.createClassを使用)

var HelloWorld = React.createClass {
  render() {
    return <div>Hello World!</div>;
  }
}

After (class, extends React.Componentを使用)

class HelloWorld extends React.Component {
  render() {
    return <div>Hello World!</div>;
  }
}

class構文ではMixinが使えない・・・

ES6のClass構文でReact Componentを作るとmixinが使えないのです。

LinkedStateMixinの例

React公式サイトから引用
https://facebook.github.io/react/docs/two-way-binding-helpers.html

var WithLink = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

ここで使われているLinkedStateMixinはvalueの変更をonChangeを拾ってsetStateしたりせずに自動で反映してくれるものです。

React用のライブラリでも現状はMixinの使用を前提としているものがあったりするのでMixinが使えないのは何かと不便です。

Mixinを使いたい場合はReact.createClassを使って書きましょうということになっているのですが、できることならclassを使って書きたいです。

ということで調べて見たら、class構文でもmixinを簡単に導入できる"react-mixin"というライブラリを見つけました。
https://github.com/brigand/react-mixin

react-mixinをimportしてReactMixin(Signup.prototype, React.addons.LinkedStateMixin);というように使います。

LinkedStateMixin with react-mixinの例

import React from 'react/addons';
import ReactMixin from 'react-mixin';
import AuthService from '../services/AuthService';

export default class Signup extends React.Component {

  constructor() {
    this.state = {
      email: '',
      password: '',
      nickname: ''
    };
  }

  signup(e) {
    e.preventDefault();
    AuthService.signup(this.state);
  }

  render() {
    return (
      <div className="login jumbotron center-block">
        <h1>Signup</h1>
        <form role="form">
          <div className="form-group">
            <label htmlFor="nickname">Nickname</label>
            <input type="text" valueLink={this.linkState('nickname')} className="form-control" id="nickname" ref="nickname" placeholder="Nickname" />
          </div>
        <div className="form-group">
          <label htmlFor="username">Email</label>
          <input type="text" valueLink={this.linkState('email')} className="form-control" id="email" placeholder="Email" />
        </div>
        <div className="form-group">
          <label htmlFor="password">Password</label>
          <input type="password" valueLink={this.linkState('password')} className="form-control" id="password" ref="password" placeholder="Password" />
        </div>
        <button type="submit" className="btn btn-default" onClick={this.signup.bind(this)}>Submit</button>
      </form>
    </div>
    );
  }
}

ReactMixin(Signup.prototype, React.addons.LinkedStateMixin);