ReactでToggleコンポーネントを作るケース

react-toggle.md

1. ABToggleButtonのような実装を各Toggleしたいコンポーネントごとに作る
   • クラスが増える
   • class ABToggleButton extends React.Component{}
   • ToggleButtonごとに明示的な名前をつけられる
   • <ABToggleButton isEditing={true}/>
   • 必要なコンポーネント = 3ファイル
2. 関数を使う
   • 引数にa, b
   • createToggleButton(a, b);
   • 高階関数を使うパターン
   • composeとか使うとかっこよくなる
   • 必要なコンポーネント = 2
3. ToggleButtonというコンポーネントにa,bを渡す
   • 2と同じ
   • <ToggleButton isA={true} a={AButton} b={BButton} />
   • 必要なコンポーネント = 2
   • 3よりは2の方が柔軟性がある
4. コンポーネント内でif分岐
   • 複雑化すると死ぬ
   • 1. は 4.をリファクタリングした感じ
   • 必要なコンポーネント:1コ
5. 親コンポーネントでif分岐
   • 親にif文が生える
   • 必要なコンポーネント: 2コ
6. ToggleButtonのchildrenを使う
   • 必要なコンポーネント: 2コ
   • A/Bテスト的なパターンコンポーネントを作るって使う

<Toggle pattern={1}>
 <ButtonA pattern={1}/>
 <ButtonB pattern={2}/>
</Toggle>

Edit: 6のパターンを作った https://github.com/azu/react-toggle-pattern