ES6のclass記法でのReact.jsでmixinを使う方法

公式ドキュメントに記載されているRect.jsのMixinはES6記法ではサポートされていません。

理想的な実装

可能であればこちらの記事を参考にして、継承でカバーしたほうがいいです。

React0.13.0-beta.1でのComponentのES6 classでの継承とmixinが使えない理由

継承でなくES6でない場合のようなmixinとして使いたい場合

react-mixin

こちらのnpmを使えば、ES6のclass記法でも利用でいます。

使用方法

npm packageをインストール

$ npm install --save react-mixin@2

こんな感じで書けばmixinとして利用できます。

Sample.jsx

import React, { Component } from 'react';
import reactMixin from 'react-mixin';
import Log from './mixin/Log.jsx';

export default class Sample extends Component {
    render() {
        return <div></div>;
    }
}

reactMixin.onClass(Sample, Log);

mixin/Log.jsx

export default {
    componentWillMount(){
        console.log("mounted");
    }
}