Children

落とし穴

Children �?使用は一般的ではなく、コードが壊れやすくなる可能性があります。一般的な代替手�?�をご覧ください。

Children は、props である children から受け取った JSX を操作、変換するために用います。

const mappedChildren = Children.map(children, child =>
  <div className="Row">
    {child}
  </div>
);

リファレンス
使用法
代替手�?�
トラブルシューティング
- カスタムコンポーネントを渡しているが、Children メソッドがそ�?レンダー結果を表示しない

リファレンス

`Children.count(children)`

Children.count(children) を呼び出して、children データ構造内�?子�?数をカウントします。

import { Children } from 'react';

function RowList({ children }) {
  return (
    <>
      <h1>Total rows: {Children.count(children)}</h1>
      ...
    </>
  );
}

さらに例を見る

引数

children: コンポーネントが props として受け取る children �?値。

返り値

当該 children 内部にあるノード�?数。

注意点

空�?ノード（null、undefined、およびブーリアン値）、文字列、数値、および React 要素が、個々�?ノードとしてカウントされます。配列自体は個別�?ノードとしてカウントされませんが、そ�?子はカウントされます。React 要素より深い走査は行われません。要素がそ�?場でレンダーされるわけではないため、子�?走査も起きません。フラグメントも走査されません。

`Children.forEach(children, fn, thisArg?)`

Children.forEach(children, fn, thisArg?) を呼び出して、children データ構造内�?それぞれ�?子に対して何らか�?コードを�?�行することができます。

import { Children } from 'react';

function SeparatorList({ children }) {
  const result = [];
  Children.forEach(children, (child, index) => {
    result.push(child);
    result.push(<hr key={index} />);
  });
  // ...

さらに例を見る

引数

children: コンポーネントが props として受け取る children �?値。
fn: それぞれ�?子に対して�?�行したい関数。配列�? forEach メソッド �?コールバックに似ています。子を第 1 引数、そ�?インデックスを第 2 引数として呼び出されます。インデックスは 0 から始まり、呼び出しごとに増加します。
省略可能 thisArg: fn 関数が呼び出される際�? this �?値。省略された場合は undefined になります。

返り値

Children.forEach は undefined を返します。

注意点

空�?ノード（null、undefined、およびブーリアン値）、文字列、数値、および React 要素が、個々�?子ノードとして扱われます。配列自体は個別�?ノードとして扱われませんが、そ�?中身は子ノードとして扱われます。React 要素より深い走査は行われません。要素がそ�?場でレンダーされるわけではないため、子�?走査も起きません。フラグメントも走査されません。

`Children.map(children, fn, thisArg?)`

Children.map(children, fn, thisArg?) を呼び出して、children データ構造内�?それぞれ�?子をマップ（変換）します。

import { Children } from 'react';

function RowList({ children }) {
  return (
    <div className="RowList">
      {Children.map(children, child =>
        <div className="Row">
          {child}
        </div>
      )}
    </div>
  );
}

さらに例を見る

引数

children: コンポーネントが props として受け取る children �?値。
fn：配列�? map メソッド �?コールバックに似たマッピング関数。子を第 1 引数、そ�?インデックスを第 2 引数として呼び出されます。インデックスは 0 から始まり、呼び出しごとに増加します。こ�?関数からは React ノードを返す必要があります。つまり空�?ノード（null、undefined、またはブーリアン値）、文字列、数値、React 要素、または他�? React ノード�?配列です。
省略可能 thisArg: fn 関数が呼び出される際�? this �?値。省略された場合は undefined になります。

返り値

children が null または undefined �?場合、同じ値を返します。

それ以外�?場合、fn 関数から返されたノードで構成されるフラットな配列を返します。返された配列には null と undefined を除くすべて�?ノードが含まれます。

注意点

空�?ノード（null、undefined、およびブーリアン値）、文字列、数値、および React 要素が、個々�?子ノードとして扱われます。配列自体は個別�?ノードとして扱われませんが、そ�?中身は子ノードとして扱われます。React 要素より深い走査は行われません。要素がそ�?場でレンダーされるわけではないため、子�?走査も起きません。フラグメントも走査されません。
fn から key 付きで要素ないし要素�?配列を返す場合、返された要素�? key は、children �?対応する元�?項�?�?キーと自動的に結合されます。fn から複数�?要素を配列で返す場合、それら�? key はそ�?内部でローカルに一意であれば十分です。

`Children.only(children)`

Children.only(children)を呼び出すことで children が単一�? React 要素を表していることを確認します。

function Box({ children }) {
  const element = Children.only(children);
  // ...

引数

children: コンポーネントが props として受け取る children �?値。

返り値

children が有効な要素である場合、そ�?要素を返します。

それ以外�?場合、エラーをスローします。

注意点

こ�?メソッドは、children に配列（Children.map �?返り値など）を渡すと常にエラーをスローします。つまり、children が単一要素�?配列などではなく、単一�? React 要素そ�?も�?であることを強制します。

`Children.toArray(children)`

Children.toArray(children) を呼び出して、children データ構造から配列を作成します。

import { Children } from 'react';

export default function ReversedList({ children }) {
  const result = Children.toArray(children);
  result.reverse();
  // ...

引数

children: コンポーネントが props として受け取る children �?値。

返り値

children 内�?内�?��?フラットな配列を返します。

注意点

空ノード（null、undefined、およびブーリアン値）は返される配列からは省かれます。返される要素�? key は、元�?要素�? key と、そ�?ネストレベルや位�?から計�?�されます。これにより、配列�?フラット化により挙動が変化しないことが保証されます。

使用法

子�?変換

コンポーネントが children プロパティとして受け取った子�? JSX を変換するために、Children.map を呼び出します。

import { Children } from 'react';

function RowList({ children }) {
  return (
    <div className="RowList">
      {Children.map(children, child =>
        <div className="Row">
          {child}
        </div>
      )}
    </div>
  );
}

上記�?例では、RowList は受け取ったすべて�?子を <div className="Row"> というコンテナにラップします。例えば、親コンポーネントが 3 つ�? <p> タグを props 経由で children として RowList に渡すとしましょう。

<RowList>
  <p>This is the first item.</p>
  <p>This is the second item.</p>
  <p>This is the third item.</p>
</RowList>

上記�? RowList �?�?�装により、最終的にレンダーされる結果は次�?ようになります。

<div className="RowList">
  <div className="Row">
    <p>This is the first item.</p>
  </div>
  <div className="Row">
    <p>This is the second item.</p>
  </div>
  <div className="Row">
    <p>This is the third item.</p>
  </div>
</div>

Children.map は map() を使って配列を変換する �?と似ています。違いは、children �?データ構造を非公開 (opaque) �?も�?と見なすべきであることです。これは、children が�?�際に配列である場合があるとしても、それを配列あるいは他�?特�?��?データ型であると�?�?�してはならないという意味です。これが、子�?変換が必要な場合には Children.map を使用すべき理由です。

Fork

import { Children } from 'react';

export default function RowList({ children }) {
  return (
    <div className="RowList">
      {Children.map(children, child =>
        <div className="Row">
          {child}
        </div>
      )}
    </div>
  );
}

さらに深く知る

なぜ children が常に配列とは限らない�?か？

React では props として�? children は非公開�?データ構造だと見なされます。つまりそ�?具体的な構造に依存してはいけないという意味です。子を変換したり、フィルタリングしたり、数えたりするためには、Children �?メソッドを使用すべきです。

�?�際には、children データ構造は内部的にはしばしば配列として表現されます。しかし、子が 1 つだけ�?場合、React は不必要なメモリオーバーヘッドを避けるため、余分な配列を作成しません。children �?中身を直接覗く�?ではなく、Children �?メソッドを使用する限り、React がデータ構造�?�?�装方法を変更してもあなた�?コードは壊れずに済みます。

children が配列である場合でも、Children.map には便利な特別な振る舞いがあります。例えば、Children.map は、返された要素�? key と、渡された children にある key を組み合わせます。これにより、上記�?例�?ようにラップされても元�?子 JSX がキーを「失う」ことはありません。

落とし穴

children データ構造は、JSX として渡されるコンポーネント�?レンダーされた出力を含みません。以下�?例では、RowList に渡される children には 3 つではなく 2 つ�?アイテム�?みが含まれます。

<p>This is the first item.</p>
<MoreRows />

こ�?ため、こ�?例では 2 つ�?行ラッパ�?みが生成されます：

Fork

import RowList from './RowList.js';

export default function App() {
  return (
    <RowList>
      <p>This is the first item.</p>
      <MoreRows />
    </RowList>
  );
}

function MoreRows() {
  return (
    <>
      <p>This is the second item.</p>
      <p>This is the third item.</p>
    </>
  );
}

children を使う際に、<MoreRows /> �?ような内側�?コンポーネント�?レンダー出力を取得する方法はありません。こ�?ため通常は代替手�?��?いずれかを使用する方が適切です。

子�?それぞれに対してコードを�?�行する

Children.forEach を呼び出すことで、children データ構造�?子�?それぞれに対して反復処理を行えます。これは値を返さない、配列�? forEach メソッドに似たも�?です。独自�?配列を構築するなど�?カスタムロジックを�?�行するために使用できます。

Fork

import { Children } from 'react';

export default function SeparatorList({ children }) {
  const result = [];
  Children.forEach(children, (child, index) => {
    result.push(child);
    result.push(<hr key={index} />);
  });
  result.pop(); // Remove the last separator
  return result;
}

落とし穴

前述�?通り、children を使用する際に、内側�?コンポーネント�?レンダー出力を取得する方法はありません。こ�?ため通常は代替手�?��?いずれかを使用する方が適切です。

子�?数を数える

Children.count(children) を呼び出して、子�?数を計�?�します。

Fork

import { Children } from 'react';

export default function RowList({ children }) {
  return (
    <div className="RowList">
      <h1 className="RowListHeader">
        Total rows: {Children.count(children)}
      </h1>
      {Children.map(children, child =>
        <div className="Row">
          {child}
        </div>
      )}
    </div>
  );
}

落とし穴

子を配列に変換する

Children.toArray(children) を呼び出して、children データ構造を通常�? JavaScript 配列に変換します。これにより、filter、sort、reverse など�?組み込み配列メソッドを使って配列を操作できます。

Fork

import { Children } from 'react';

export default function ReversedList({ children }) {
  const result = Children.toArray(children);
  result.reverse();
  return result;
}

落とし穴

代替手�?�

補足

こ�?セクションで説明している�?は、以下�?ようにしてインポートする Children API（大文字�? C）�?代わりに使える手�?�です。

import { Children } from 'react';

これを children �?使用（小文字�? c）と混同しないでください。こちらは良いことであり、推奨されています。

複数�?コンポーネントを公開する

Children �?メソッドを使って children を操作することで、しばしばコードが壊れやすくなります。JSX でコンポーネントに children を渡す場合、通常はコンポーネントにより個々�?子が操作されたり変換されたりすることを予想していないでしょう。

できる限り Children メソッド�?使用は避けてください。例えば、RowList �?すべて�?子を <div className="Row"> でラップしたい場合、Row コンポーネントをエクスポートし、こ�?ように各行を手動でラップします。

Fork

import { RowList, Row } from './RowList.js';

export default function App() {
  return (
    <RowList>
      <Row>
        <p>This is the first item.</p>
      </Row>
      <Row>
        <p>This is the second item.</p>
      </Row>
      <Row>
        <p>This is the third item.</p>
      </Row>
    </RowList>
  );
}

Children.map を使用する場合とは異なり、こ�?アプローチではすべて�?子を自動的にラップしてくれません。しかし先ほど�? Children.map を使用した例と比較しても、こ�?アプローチには、さらに多く�?コンポーネントを抽出しても機能するという利点があります。例えば、自前�? MoreRows コンポーネントを抽出しても機能します。

Fork

import { RowList, Row } from './RowList.js';

export default function App() {
  return (
    <RowList>
      <Row>
        <p>This is the first item.</p>
      </Row>
      <MoreRows />
    </RowList>
  );
}

function MoreRows() {
  return (
    <>
      <Row>
        <p>This is the second item.</p>
      </Row>
      <Row>
        <p>This is the third item.</p>
      </Row>
    </>
  );
}

これは Children.map では機能しません。なぜなら、<MoreRows /> が単一�?子（つまり単一�?行）�?ように「見える」からです。

配列を props として受け入れる

明示的に配列を props として渡すこともできます。例えば、以下�? RowList は rows という配列を props として受け取ります。

Fork

import { RowList, Row } from './RowList.js';

export default function App() {
  return (
    <RowList rows={[
      { id: 'first', content: <p>This is the first item.</p> },
      { id: 'second', content: <p>This is the second item.</p> },
      { id: 'third', content: <p>This is the third item.</p> }
    ]} />
  );
}

rows は通常�? JavaScript �?配列な�?で、RowList コンポーネントは map �?ような組み込み�?配列メソッドを使用できます。

こ�?パターンは特に、子と一緒に構造化データとしてより多く�?情報を渡したい場合に有用です。以下�?例では、TabSwitcher コンポーネントは props である tabs 経由でオブジェクト�?配列を受け取ります。

Fork

import TabSwitcher from './TabSwitcher.js';

export default function App() {
  return (
    <TabSwitcher tabs={[
      {
        id: 'first',
        header: 'First',
        content: <p>This is the first item.</p>
      },
      {
        id: 'second',
        header: 'Second',
        content: <p>This is the second item.</p>
      },
      {
        id: 'third',
        header: 'Third',
        content: <p>This is the third item.</p>
      }
    ]} />
  );
}

JSX として子を渡す�?とは異なり、こ�?アプローチでは header �?ような追加�?データを各アイテムに関連付けることができます。tabs を直接操作しており、それは配列な�?で、Children メソッドは必要ありません。

レンダープロップを呼び出してレンダーをカスタマイズする

すべて�?アイテムに対して JSX を生成しておく代わりに、JSX を返す関数を渡し、必要なときにそ�?関数を呼び出してもらうこともできます。以下�?例では、App コンポーネントは renderContent という関数を TabSwitcher コンポーネントに渡しています。TabSwitcher コンポーネントは選択中�?タブ�?みに対して renderContent を呼び出します。

Fork

import TabSwitcher from './TabSwitcher.js';

export default function App() {
  return (
    <TabSwitcher
      tabIds={['first', 'second', 'third']}
      getHeader={tabId => {
        return tabId[0].toUpperCase() + tabId.slice(1);
      }}
      renderContent={tabId => {
        return <p>This is the {tabId} item.</p>;
      }}
    />
  );
}

renderContent �?ような props は、ユーザインターフェース�?一部をど�?ようにレンダーするかを指�?�する props であるため、レンダープロップ (render prop) と呼ばれます。しかし、これについて特別なことは何もありません。たまたたま関数型であるというだけ�?通常�? props に過ぎません。

レンダープロップは関数な�?で、情報を渡すことができます。例えば、以下�? RowList コンポーネントは、各行�? id と index を renderRow というレンダープロップに渡し、index を使って偶数行をハイライトします。

Fork

import { RowList, Row } from './RowList.js';

export default function App() {
  return (
    <RowList
      rowIds={['first', 'second', 'third']}
      renderRow={(id, index) => {
        return (
          <Row isHighlighted={index % 2 === 0}>
            <p>This is the {id} item.</p>
          </Row> 
        );
      }}
    />
  );
}

こ�?ような方法でも、親コンポーネントと子コンポーネントが、子�?操作を行わずに協調動作できるということです。

トラブルシューティング

カスタムコンポーネントを渡しているが、`Children` メソッドがそ�?レンダー結果を表示しない

RowList に以下�?ように 2 つ�?子を渡すとします。

<RowList>
  <p>First item</p>
  <MoreRows />
</RowList>

RowList �?中で Children.count(children) を行うと、結果は 2 になります。MoreRows が 10 �?異なるアイテムをレンダーする場合でも、null を返す場合でも、Children.count(children) はやはり 2 になります。RowList �?視点からは受け取った JSX �?みが「見えて」いるからです。MoreRows コンポーネント�?中身は「見えて」いません。

こ�?制限はコンポーネント�?抽出を困難にします。これが Children を使用する�?ではなく、代替手�?�を使用すべき理由です。

Previousレガシー React API NextcloneElement

Children

落とし穴

リファレンス

Children.count(children)

引数

返り値

注意点

Children.forEach(children, fn, thisArg?)

引数

返り値

注意点

Children.map(children, fn, thisArg?)

引数

返り値

注意点

Children.only(children)

引数

返り値

注意点

Children.toArray(children)

引数

返り値

注意点

使用法

子�?変換

さらに深く知る

なぜ children が常に配列とは限らない�?か？

落とし穴

子�?それぞれに対してコードを�?�行する

落とし穴

子�?数を数える

落とし穴

子を配列に変換する

落とし穴

代替手�?�

補足

複数�?コンポーネントを公開する

配列を props として受け入れる

レンダープロップを呼び出してレンダーをカスタマイズする

トラブルシューティング

カスタムコンポーネントを渡しているが、Children メソッドがそ�?レンダー結果を表示しない

`Children.count(children)`

`Children.forEach(children, fn, thisArg?)`

`Children.map(children, fn, thisArg?)`

`Children.only(children)`

`Children.toArray(children)`

カスタムコンポーネントを渡しているが、`Children` メソッドがそ�?レンダー結果を表示しない