React の props.children の完全ガイド

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

React コンポーネントと子

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

<Profile>
  <ProfileImage src="/asset/profile-img.png" />
  <ProfileDetails name="Antonello" surname="Zanini" />
</Profile>

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

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

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

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

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

アクションの props.children

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

<ImageSlider>
  <img src="/assets/img-1.pg" />
  <img src="/assets/img-2.pg" />
  <img src="/assets/img-3.pg" />
</ImageSlider>

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

export default function ImageSlider(props) { 
    return (
      <div className="img-slider">
        {props.children}
      </div>
    );  
}

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

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

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

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

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

<MyComponent>
  { String(undefined) }
</MyComponent>

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

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

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

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

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

  return (
    <div className="split-pane">
      <div className="left-pane">
        { left }      
      </div>
      <div className="right-pane">
        { right }      
      </div>
    </div>
  );
}

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 (
    <div className="img-slider">
      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    </div>
  );
}

React.Children.map allows us to iterate over props.children and transform each element according to the function passed as the second parameter. To achieve our goal, we used React.cloneElement. This is because we needed to change the value of the className prop, but props are immutable in React, so we had to clone each child.

Conclusion

Mastering props.children is essential to becoming a great React developer and beginning to harness the full potential of the React component model. props.children is one of React's most useful features, since it gives us the ability to render child components. Because of this, every developer should know how to use it properly.

I hope this article helps you master composition in React.

The post "A Complete Guide To props.children In React" appeared first on Writech.

以上がReact の props.children の完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。