React props.children 子要素の出力 入門

コンポーネントで事前に子要素がわからない場合、props.childrenを利用して子要素の出力を行います。

入れ物のような汎用的に使うことがある「ダイアログ」・「サイドバー」などで利用することがあるようです。

異なった子要素を親の枠に出力したい時などで利用するイメージでしょうか。

今回も簡単なサンプルで学習していきます。

手を動かしたい方は、こちらからプロジェクトの作成をお願いいたします。

App.js + App.cssを編集していきます。

スポンサーリンク

props.childrenを使ってみる

子要素出力するための親コンポーネントを作成

function Frame(props) {
  return (
    <div className={'Frame-' + props.color}>
      {props.children}
    </div>
  );
}

子要素を作成

function Welcome() {
  return (
    <Frame color="blue">
      <h1 className="title">
        Welcome
      </h1>
      <p className="message">
        ようこそ！
      </p>
    </Frame>
  );
}
function GoodBy() {
  return (
    <Frame color="red">
      <h1 className="title">
        GoodBy
      </h1>
      <p className="message">
        さようなら！
      </p>
    </Frame>
  );
}

子要素の中身に応じて出力することを確認してみたいので、WelcomとGoodBy2つ用意しました。

Appで作成したコンポーネントを呼び出す

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Welcome />
        <GoodBy />
      </header>
    </div>
  );
}

今回赤と青でフォントの色を分けたので、App.cssなどにClassを追加

.Frame-blue {
  color: blue;
}
.Frame-red {
  color: red;
}
$ yarn start

Frame（親）に子要素Welcom / GoodByがそれぞれ出力されました。

まとめ

使いどころとしては、枠組みがあってその内の出力を条件に応じて変更したい時などに使うのが一番オーソドックスな気がしました。

react, フロントエンドreact

Posted by westworker