JSXのコンポーネントを分割してコードをスッキリさせる

React+Reduxでの開発をしていて気づいたらコンポーネントが肥大化してるので、これを分割してスッキリさせたい。

コンポーネントの例

こんな感じで書かれたコンポーネントがあるとする。
aaa と bbb を分割してやりたい。

const Hoge = () => (
  <div>
    <div>
      aaa
    </div>
    <div>
      bbb
    </div>
  </div>
)

分割方法

こんな感じにすれば Hoge がスッキリする。

const RenderA = () => (
  <div>
    aaa
  </div>
);

const RenderB = () => (
  <div>
    bbb
  </div>
);

const Hoge = () => (
  <div>
    <RenderA />
    <RenderB />
  </div>
)

まとめ

コンポーネントを分割してコードを読みやすく保ちましょう。

変更履歴

1. 関数で書くよりもタグを使うほうが良いというコメント頂いたので修正しました。 2017/04/26