【TypeScript】Reactでのprops.childrenの使い方をわかりやすくご紹介。

今回の記事はTypeScriptベースのReactでのprops.childrenの使い方をわかりやすくご紹介する記事です。childrenの役割と仕組み、実際に関数の引数に定義してJSX側で使うところまで解説していきます。是非参考にしてみてください。

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

では次にPropsのchildrenに関して実際に動くサンプルを作成して解説していきます。

props.childrenについて

まずは、props.childrenに関して説明していきます。実際の動くコードのみ見たい方はこの章は飛ばしてください。

Reactで重要になってくるのが「props（プロップス）」という受け渡し用の入子のような要素です。まずはPropsに関して知りましょう。

ReactのPropsをわかりやすく図解

このPropsに入っている要素に変数として値をセットすることで自由にJSX（htmlのようなReactタグ）で使用できます。

関数内で使用する場合は下記のようなイメージです。

この関数をコードで書くと下記となるという仕組みです。

const Sample1 = (props) => {
    return(
        <div>
            {props.title}
            {props.info}
        </div>
    );
};

この関数を使うと下記のようにJSXが描写（レンダリング）されます。

ただし、今回はJavaScriptではなくTypeScriptでの解説になります。上記の例がよく参考記事などに出てきますが、型指定をしていないためTypeScriptベースのReactプロジェクトではエラーになります。

TypeScriptの場合は下記のように記述します。

type Props {
   title:string
   info:string
}

const Sample1 = (props:Props) => {
    return(
        <div>
            {props.title}
            {props.info}
        </div>
    );
};

このように「type」で型を作成し使用すれば問題なしです。

では次に本題のchildrenに関してご紹介していきます。

Reactのprops.childrenについて

先ほどのpropsの入子の中に実はchildrenはすでにいます。

定義していなくとも存在しているのです。

そのためTypeScriptの場合も「type」内にあえてchildrenを記載する必要はありません。あえて記述するなら下記となります。

type Props {
   title:string
   info:string
   children?:React.ReactNode
}

今回「title」「info」は共に文字列を渡して関数を実行することで文字列を出力していました。childrenはこういった文字列などではなく「ReactNode」を格納し使うことができます。

「ReactNode」はJSXの要素のことです。

つまり「divタグとその中身」を丸ごと格納することが可能ということです。

では実際にこのchildrenを使って動くサンプルを記載していきます。

Reactのprops.childrenの使い方

初期のプロジェクト構成の「App.tsx」を編集します。

import React from 'react';

const Label1 = () => {
  return (
    <div>
      Childrenの部分
    </div>
  )
}

const Test: React.FC = ({ children }) => {
  return (
      <div>
          {children}
      </div>
  );
};

const App: React.VFC = () => {
  return (
    <div>
      <Test >
        <Label1 />
      </Test>
    </div>
  );
}

export default App;

これでbuildすると「Childrenの部分」という文字列が初期ページで確認できると思います。

解説していきます。

const Label1 = () => {
  return (
    <div>
      Childrenの部分
    </div>
  )
}

まず、この部分はテキストを表示しているJSXです。これを、そのままchildrenに入れて関数内で使っています。

関数部分は下記です。

const Test: React.FC = ({ children }) => {
  return (
      <div>
          {children}
      </div>
  );
};

単純に引数にchildrenを指定しているのみです。このchildrenに入ってくるものを表示してくれるという内容です。

関数を実際に使う場合、propsの基本的な値に代入をする場合は下記のようにタグに代入を行います。

<Test text="文字列">

しかし、childrenに代入を行う場合は下記のようにReactタグで囲って指定します。

const App: React.VFC = () => {
  return (
    <div>
      <Test >
        <Label1 />　　←ここ
      </Test>
    </div>
  );
}

childrenとその他propsの基本的な要素を代入する場合は下記のようにすれば代入できます。

<Test text="文字列”>
   <Label1 />
</Test>

では今回の記事は以上です。初心者にもわかりやすいようにできるだけ詳しく記載したので皆さんお助けになれば幸いです。ほかにも多数のTypeScript関連記事を記載しているので是非参考にしてみてください。