【React】コンポーネントでのchildrenの使い方を初心者向けに解説！

2022年8月26日

コンポーネントでchildrenという記述があったんだけど、
どのような意味があるの？

childrenはコンポーネントで使える特別なものだよ！
使い方自体は簡単だから解説していくね！

childrenとは？

「children」はコンポーネントのタグで囲まれた内容を表します。

コンポーネントのタグで囲まれた中に記述された内容がchildrenとなり、コンポーネント内でその内容をchildrenとして扱うことができます。

コンポーネント内ではpropsにchildrenを指定することで利用することができます。

childrenの使い方

言葉だけでの説明ですと少しイメージしづらいと思うので、ソースコードを使って詳しく解説していきます。

childrenを使ったコンポーネント

コンポーネントのpropsにchildrenを指定します。

これは特別な名前なので名前はchildrenと決まっています。

const SampleComponent = ({children}) => {
  return <div style={{ color: 'red' }}>{children}</div>
}

呼び出し元

コンポーネントの開始タグと終了タグで、内容を囲みます。

タグで囲まれた内容がchildrenとなり、SampleComponent内で参照することができます。

<SampleComponent>
  ここに記述された内容がchildrenとなります。
</SampleComponent>

HTMLで表示される内容

SampleComponentのreturnでchildrenを<div>タグで囲んでいるので、<div>タグの中に内容が入った状態で出力されます。

style属性にcolor: redを指定しているので、赤色で出力されます。

childrenを使うことで、コンポーネントのタグで囲まれた内容に対して、さらにタグを囲んで返すことができます。

<div style="color: red;">ここに記述された内容がchildrenとなります。</div>

childrenをuseContexで使う

childrenはReact HookのuseContextで使われることが多いです。

childrenを使うことでuseContextを管理する専用のコンポーネントを作ることができます。

詳しくはこちら

【React】useContextの使い方！初心者向けに分かりやすく解説！

実例を元にしてchildrenが使われるケースについて解説していきます。

childrenを使ったuseContext専用のコンポーネントを作成

まずはuseContextを管理するコンポーネントを作成します。

このコンポーネントではcountを管理するstateを作成し、useContextで他のコンポーネントでもデータを共有できるようにします。

関連するstateなどまとめて記述できるので、データの関連性がより分かりやすくなり可読性が上がります。

childrenを<CountContext.Provider>タグで囲んだ内容をreturnで返すようにします。

import React, { createContext } from 'react';

// Contextの作成
export const CountContext = createContext();

export const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <CountContext.Provider value={{count, useCount}>
        { children }
      </CountContext.Provider>
    </div>
  );
}

複数のコンポーネントでuseContextを使う

複数のコンポーネントでuseContextを使うために、先程作成したuseContextを管理するコンポーネント（CountProvider）をimportします。

importした<CountProvider>タグの中でコンポーネント呼び出しをすると、タグの中にあるコンポーネント全てでCountProviderコンポーネントで定義したuseContextを使うことができるようになります。

useStateの定義やuseContextの定義に関する記述をしなくてもよくなるため、シンプルな記述ができるようになります。

import React from 'react';

import { CountProvider } from './providers/CountProvider';

import { ComponentA } from './ComponentA';
import { ComponentB } from './ComponentB';
import { ComponentC } from './ComponentC'

export const MainComponent = () => {
  return(
    <CountProvider>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </CountProvider>
  );
};

useContext専用のコンポーネントを使わなくても以下のような記述ができますが、stateやcontextの定義も記述する必要があるので、コードの量が増えてしまいます。

<div>
  <CountContext.Provider value={{count, useCount}>
    <ComponentA />
    <ComponentB />
    <ComponentC />
  </CountContext.Provider>
</div>

useContextを呼び出すコンポーネント

useContextを管理しているCountProviderコンポーネントからCountContextをimportすることで、contextを使った状態管理ができるようになります。

import React, { useContext } from 'react';

import { CountContext } from './providers/CountProvider';

export const ComponentA = () => {
  // 親コンポーネントで設定した値を受け取る
  const{ count, setCount } = useContext(CountContext);

  return (
    <div>
      <p>カウント: {count}</p>

　　　 <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}