ほぼ日刊サービス開発日誌

React, firebase, 機械学習など

sponsored

React.js - Tabの表現には props.children が便利

https://i.ytimg.com/vi/MhkGQAoc7bc/maxresdefault.jpg

最近、遅まきながらReactを勉強しています。VR, Web, iOS, androidで一つのコンポーネントを使いまわして表現できるのはとても魅力的だと思ったからです。

呼び出す親側から変数をDOMタグのアトリビュートとして受け取りpropsから引き出す・・・という形態に馴染めなかったのですが、一番戸惑ったのが children というpropsです。

class TabPanel extends React.Component {
  render() {
    return(
      <div>
        <Pane>
          Hello!!!! 1
        </Pane>
        <Pane>
          Hello!!!! 2
        </Pane> 
        <Pane>
          Hello!!!! 3
        </Pane>
      </div>
    )
  }
}

↑ こういうPane クラスを複数個レンダリングするコンポーネントがあるとします。

class Pane extends React.Component {
  render() {
    return (
      <section className="mypage-main__content mypage-content u-margin-top-medium">
        <div className="tab-content">
          {this.props.children}
        </div>
      </section>
    );
  }
}

すると、Paneクラスでは、呼び出し側の親クラスで定義したタグの中身を呼び出せるというものです。

だいたい同じ構造のDOM要素ブロックの繰り返しなんだけど、一部違うものを表示させたい、別のコンポーネントを作るほどじゃない・・・といったときに便利です。