【React】children と propTypes を使えるようになる

React

childrenというメソッドが存在するわけではないですが、暗黙の了解で共通認識となっている、であろうchildrenの使い方についてまとめています。

子要素を渡すという概念が、通常のpropsと少し異なり、少し戸惑ったので整理しました!

どんなときに使うのか?

子要素を変数にしたいとき。

例えば、ボタンの、デザインは共通にしたいが、表示文字だけ変えたい!といったときなどなど…

childrenを使うことの最大のメリットは、呼び出す親側でchildrenの要素を変更できることにあります。

通常のコンポーネントだと、コンポーネント側でしか値を変えられず、親側で値を変えられません。

一番シンプルに使ってみる

export const Parent = (props) => {
  const { children } = props

  return <h1>{children}</h1>
}

Parentというコンポーネントを作成し、childrenという名前の通り、Parentの子要素がpropsで渡されるため、それを分割代入し、<h1>タグに囲まれたところに表示する。

この<h1>タグに囲まれた要素の中身はpropsの渡し元であるApp.jsファイル内のParent内で記述されたものです。

import { Parent } from "./Parent"

function App() {
  return (
    <Parent>
      childrenに入るよ!
    </Parent>
  );
}

export default App;

なんかこれだとあまりchildrenのありがたみを感じないですが、

例えば<h1>が凝った作りのボタンで、且つ、App.jsファイル内のみでなく、いろんなところで使用する場合、その中の表示文のみの変更で済んだら楽ですよね。

使い方はそんな感じです。

headerで使用する

headerをコンポーネント化する場合、header以下の要素をchildrenにまとめてしまうことができます。

export const Header = (props) => {
  const { children } = props
  return (
    <>
      <div style={{ height: "50px", backgroundColor: "green" }}>ヘッダー</div>
      {children}
    </>
  )
}

Hearというコンポーネントを作成し、高さ50px、背景色緑のヘッダーを作成し、その下に、childrenとしてpropsで渡される要素を表示する。

App.js側で、Headerの子要素、つまりchildrenは、ヘッダー以下に表示される要素となる。

import { Parent } from "./Parent"
import { Header } from "./Header"

function App() {
  return (
    <Header>
      <Parent>
        childrenに入るよ!
      </Parent>
      <Parent>
        これもchildrenに入るし
      </Parent>
      <Parent>
        これもchildrenに入るよ!
      </Parent>
    </Header>
  );
}

export default App;

これによりできたのがこちら

これをchildrenを使わない場合、このように書くこともできます。

export const Header = () => {
  return <div style={{ height: "50px", backgroundColor: "green" }}>ヘッダー</div>
}

import { Parent } from "./Parent"
import { Header } from "./Header"

function App() {
  return (
    <>
      <Header />
      <Parent>
        childrenに入るよ!
      </Parent>
      <Parent>
        これもchildrenに入るし
      </Parent>
      <Parent>
        これもchildrenに入るよ!
      </Parent>
    </>
  );
}

export default App;

この場合、こちらのほうが、シンプルに書けますね。用途に合わせて使い分けられるといいですね。

propsType

ちょっと待っください!これら紹介した childeren の使い方では少し不親切です。

例えば、冒頭に紹介したこちら!

export const Parent = (props) => {
  const { children } = props

  return <h1>{children}</h1>
}

propsとしてchildrenが渡ってくることはわかりました。でも、このchildrenに何が渡ってくるかってどうやってわかるんでしょうか?

コンポーネント名をParentにしているので、Parentコンポーネントが使われているところを探しに行く。

それでもいいですね。というかそれしかないですね。

しかし、このファイル内で一発でわかった方がより楽ちんですよね。

それを実現するのが、propTypes

それでは具体的な使い方を見ていきましょう!

まずはprop-typesというライブラリをインストールします。

$ npm show prop-types

まずはこちらで、最新のバージョンを確認し、確認ができたところで、そのバージョンを指定してインストールします。

$ npm install prop-types@15.8.0

これでインストールは完了です。

あとはコードの方に付け加えていきます。

import { string } from 'prop-types';

export const Parent = (props) => {
  const { children } = props

  return <h1>{children}</h1>
}

Parent.propTypes = {
  children: string.isRequired,
};
  • prop-typesから型stringをimport
  • 渡ってくるpropsの型をstringで指定する
  • isRequiredとして必須であることを明示する

これでpropsを受け取るファイル内でどんなpropsが渡ってくるか把握できるようになりました。」

また、型指定をすることでバグが起こりにくくすることができました。

変数がisRequiredでないときの指定方法

値が必須の場合は上記のようにisRequiredとすればよかったですが、必須でない場合、default値を設定します。

例えば、boolean型で、default値がfalseの場合、以下のように指定します。

Parent.defaultProps = {
  bang: false,
};

以上、最後まで見ていただきありがとうございました。

コメント

タイトルとURLをコピーしました