【React】関数を生成する関数を使って複数のコンポーネントで setState 等を使うモジュールを共有する

　アンチパターンかもしれませんが、こうすることで動作に制限のないモジュール（コンポーネントの構成部品）を共有できる、という例を紹介します。
　使うのは関数を生成する関数です。これを使って Function.bind(this) 的なおまじないめいたコードを抜きにコンポーネントに内部を参照する関数をコンポーネントのメソッドとして生やします。
Function.prototype.bind() – JavaScript ｜ MDN
　例えば次です。

class Helper {
  // コンポーネントを引数に取る
  static makeHogeFunc(component) {
    // 関数を返す
    return () => {
      // 引数にとったコンポーネントの setState を動かす
      component.setState({
        items: [
          {text: 'Hoge', done: false},
          {text: 'Fuga', done: false},
        ],
      });
    };
  }
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    // this を引数に関数を返す Helper.makeHogeFunc を呼ぶ
    // 返ってきた関数をプロパティに設置
    this.changeItems = Helper.makeHogeFunc(this);
    this.state = {
      items: [],
    };
  }

  render() {
    // 省略
  }
}

　こうすることで呼び出し側の記述を減らして、自由に中身を記述できる関数をプロパティに入れるための関数を作れます。関数を実行する度に違う関数オブジェクトが生成されるので複数のコンポーネント間で謎の連動が起きることもありません。実際に複数コンポーネントを扱ったデモが次です。

　これの問題点は state を暗黙的に扱ってしまいやすいところでしょう。インターフェース的な何かしら（できれば TypeScript）でコンポーネントの持つ state の定義を定めると安全に扱えそうです。