0Pricing
React Academy · レッスン

props.childrenの基礎

JSXをchildrenとして渡し、単一・複数のchildrenと条件付きの子要素レンダリングを行います

「props.childrenの基礎」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、JSXを子要素として渡す方法、単一の子要素と複数の子要素を描画する方法、そしてReactコンポーネントで子要素を条件付きで描画する方法を習得します。

childrenプロパティ

コンポーネントの開始タグと終了タグの間に置いたJSXは、すべて自動的に `props.children` として利用できます。これはラッパーコンポーネントやレイアウトコンポーネントを構築する方法です。
function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Usage
<Card><p>Hello world</p></Card>

単一の子要素と複数の子要素

子要素を1つ渡すと、`children` はReact要素になります。複数の子要素を渡すと、`children` は配列になります。渡す子要素の数によって動作が変わります。
<Card>One child</Card>          // children is a string
<Card><p>A</p><p>B</p></Card>  // children is an array

子要素を直接描画する

子要素の最も簡単な使い方は、JSX内で直接描画することです。レイアウトとスタイルは親が制御し、コンテンツは利用側が制御します。
function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </section>
  );
}

子要素の条件付き描画

描画する前に、子要素が渡されているか確認します。子要素が指定されていない場合に、代替コンテンツを表示するコンポーネントも作成できます。
function Panel({ children }) {
  if (!children) return <p>Nothing to show</p>;
  return <div className="panel">{children}</div>;
}

子要素としてのRender Prop

子要素には**関数**を指定することもできます（render propパターン）。親がデータを渡してその関数を呼び出し、利用側が描画方法を制御します。これは古いパターンで、現在ではカスタムフックで置き換えることが多くなっています。
function DataLoader({ children }) {
  const data = useFetchData();
  return children(data); // consumer receives data
}

<DataLoader>{data => <ul>{data.map(...)}</ul>}</DataLoader>

子要素をプロパティとして渡す

子要素は特別な `{children}` スロットを使わなくても構いません。任意のプロパティ名を使ってJSXを渡すこともできます。これが名前付きスロットの基礎になります。
function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

デフォルトの子要素

分割代入でJavaScriptのデフォルト引数構文を使うと、デフォルトの子要素を指定できます。親から何も渡されなかった場合は、デフォルトのコンテンツが表示されます。
function Button({ children = 'Click me' }) {
  return <button>{children}</button>;
}

フラグメントと複数の子要素

ラッパーのdivを使わずに複数の要素を返すには、`React.Fragment` または省略記法の `<>...` を使います。余分なDOMノードによってCSSが崩れる可能性があるレイアウトコンポーネントで便利です。
function Row({ children }) {
  return <>{children}</>;
}

TypeScript: 子要素の型付け

TypeScriptでは、子要素の型に `React.ReactNode` を使います。要素、文字列、数値、配列、null、undefinedを受け入れられます。
interface Props {
  children: React.ReactNode;
}

function Box({ children }: Props) {
  return <div>{children}</div>;
}

確認問題

コンポーネントのタグの間に複数のJSX要素を渡した場合、props.children の型は何になりますか？

復習

props.children には、タグの間に渡された任意のJSXが格納されます。単一の子要素は要素になり、複数の子要素は配列になります。省略可能な子要素には条件チェックを使い、名前付きスロットには名前付きプロパティを使います。

次のレッスン

次のレッスン: **React.Childrenユーティリティ** — React.Children.map、count、toArrayを使って、子要素の種類や数に関係なく安全に操作する方法を学びます。

よくある質問

「props.childrenの基礎」レッスンは無料ですか？

はい。「props.childrenの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「props.childrenの基礎」で何を学びますか？

JSXをchildrenとして渡し、単一・複数のchildrenと条件付きの子要素レンダリングを行います ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「props.childrenの基礎」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. props.childrenの基礎
  2. React.Childrenユーティリティ
  3. Object Propsによる名前付きスロット
  4. cloneElementでPropsを複製・注入する
← React Academyに戻る