私は、React コンポーネント モデルの本当の力を完全には理解せずに、数か月間 React を使用して開発しました。ある日、私は作曲に没頭することに決めました、そしてこれが私が学んだことです。

React コンポーネントと子

React では、コンポーネントは 1 つの子を持つことも、多数の子を持つことも、持たないこともできます。素晴らしいですが、待ってください — 「子供」とは何ですか?例を挙げて説明しましょう:

プロファイル コンポーネント には、ProfileImage と ProfileDetails という 2 つの子がありますが、これら 2 つの には子がありません。

"開始タグと終了タグの両方を含む JSX 式では、これらのタグ間のコンテンツは特別なプロパティ props.children として渡されます。" — React ドキュメント

本質的に、props.children はすべてのコンポーネントに自動的に渡される特別な prop で、コンポーネントを呼び出すときに開始タグと終了タグの間に含まれるコンテンツをレンダリングするために使用できます。このような種類のコンポーネントは、公式ドキュメントでは「ボックス」として識別されます。

JSX 構文によるコンポーネントの識別

React の JSX では、子を持つコンポーネントは常に開始タグと終了タグによって識別されます。上で見たように、各子はこれら 2 つのタグの間に配置する必要があります。コンポーネントに子がない場合は、 または のいずれかを使用してコンポーネントを呼び出すことができますが、通常は後者の構文が推奨されます。自己終了タグの目的は、コードを短くして読みやすくすることです。

アクションの props.children

ImageSlider コンポーネントを作成すると仮定します。私たちの目標は、次のようにコンポーネントを呼び出すことです:

ご覧のとおり、ImageSlider はいくつかの で構成されており、props.children.
を通じてアクセスしてレンダリングできます。

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

props.children のおかげで 一般的な HTML 要素をネストするのと同じように、コンポーネント内にコンテンツをネストできます。

props.children ではどのような種類のコンテンツが許可されますか?

props.children を通じてコン​​ポーネントに渡されるコンテンツには、

を含めることができます 未定義、null、ブール値、数値、文字列、React 要素、またはこれらの型のいずれかの配列を再帰的に返します。これらの型のいずれかを返す関数にすることもできます。

React のドキュメントで説明されているように、false、null、unknown、および true は有効な子ですが、これらは無視され、レンダリングされないことに注意してください。 false、true、null、または未定義をレンダリングしたい場合は、まずそれを文字列に変換する必要があります:

  { String(undefined) }

props.children がなぜそれほど重要なのでしょうか?

props.children を使用すると、コンポーネントを構成でき、結果としてフロントエンド インターフェイスを構成できます。 React コンポーネント モデルの真の力を活用します。

「React には強力な合成モデルがあり、コンポーネント間でコードを再利用するには、継承ではなく合成を使用することをお勧めします。」 — React ドキュメント

公式ドキュメントで説明されているように、コンポーネント内の複数の「穴」を埋める必要がある場合があります。このような場合、props.children を使用する代わりに、複数のカスタム props を定義する方が望ましいアプローチになる可能性があります。次の例に示すように:

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

React.Children

"React.Children は、props.children の不透明なデータ構造を処理するためのユーティリティを提供します" — React ドキュメント

なぜ props.children は「不透明なデータ構造」なのでしょうか?

props.children は 1 つ、多数の子要素、または子要素なしで構成できるため、つまり、その値は 単一の子ノード、子ノードの配列、またはになる可能性があります。 未定義 それぞれ。 React.Children API のおかげで、考えられる型をそれぞれ考慮することなく、props.children を簡単に処理できます。ありがたいことに、すべてがバックグラウンドで処理されます。

この記事の執筆時点では、React.Children は 5 つの異なるユーティリティ:

• 地図

• それぞれ

• カウント

• のみ

• toArray

React.Children の使用方法を例を挙げて見てみましょう。特別な CSS クラス img-special-class を ImageSlider コンポーネントのそれぞれの子に追加するとします。これは次のように実行できます:

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map を使用すると、props.children を反復処理し、2 番目のパラメーターとして渡された関数に従って各要素を変換できます。目標を達成するために、React.cloneElement を使用しました。これは、className プロパティの値を変更する必要があるためですが、 プロパティは React では不変であるため、各子のクローンを作成する必要がありました。

結論

props.children をマスターすることは、優れた React 開発者になり、React コンポーネント モデルの可能性を最大限に活用し始めるために不可欠です。 props.children は、子コンポーネントをレンダリングできるため、React の最も便利な機能の 1 つです。このため、すべての開発者はそれを適切に使用する方法を知っておく必要があります。

この記事が React での合成をマスターするのに役立つことを願っています。

投稿「React における props.children の完全ガイド」は Writech に最初に掲載されました。