これは、プロップの使用方法に関する初心者向けのチュートリアルです。読む前に、分割とは何か、コンポーネントの使用/作成方法を理解することが重要です。

Props (プロパティの略) を使用すると、親コンポーネントから子コンポーネントに情報を送信できます。また、任意のデータ型を使用できることに注意することも重要です。

コンポーネントのプロップを作成するための構文を理解することが不可欠です。 React では、HTML タグの属性を記述するために同じ構文を使用する必要があります。プロパティを指定する方法は、次のように要素内にプロパティを配置することです:

ParentPlant() {
  return  
}

Prop を作成するときに覚えておくべき良いルールは次のとおりです。文字列の値を中かっこで囲む必要はありません。これは他のデータ型に対してのみ行います。上でわかるように、親コンポーネントにプロパティを割り当てることで、多数のプロパティを持つことができます。コンポーネント内にプロップがある場合、技術的にそれらを下に渡していることを知っておくことが重要です。小道具を渡したら、目的のコンポーネント内で小道具を受信できるようにする必要があります。この場合、ChildPlant コンポーネント。

小道具の受信:

function ChildPlant(props) {
  return (
    
      {props.text} {props.number}
    >
  )
}

ここで行うことは次のとおりです。 1. ChildPlant コンポーネントのパラメーター内でプロップを受信して​​います。 2. プロップの名前を使用してプロップの値を構造化しています。プロパティ はパラメータ ではなく、むしろパラメータと同様に機能することを知っておくことが重要です。

親コンポーネントのデータをその子コンポーネントに渡す唯一の方法は、props を使用することです。私はこれを DNA のように考えるのが好きです。親コンポーネントは、その中にすでに存在するそれ自体の側面を保持しています。その子供は親の DNA の側面も持っている可能性があるため、小道具はその子供の髪を赤、黒、または金髪にする活性化剤のように機能します。

Props は子関数で受信され、親関数経由で送信されますが、Props は下向きにのみ送信でき、上向きに送信することはできません。小道具もオブジェクトとして考えることができます。これは、本質的にキーと値のペアに似たデータを保持するためです。これらがパラメータに似ている理由をもう一度説明すると、パラメータ内に複数のオブジェクトが格納されているということです。私は、小道具がプレースホルダーとして受け取られる領域について考えるのが好きです。これらはコンポーネントと共有したいオブジェクト用のスペースを占有し、必要に応じて構造化とドット表記によって交換します。

これを視覚化する良い方法があります:

ここでは、正方形のボックス内のすべてを保持するプロップを視覚化できます。各プロップは、最初の例のそれぞれのデータ値を保持します。ここで、分割メソッドを使用してプロパティの値を取得するだけです。これがプロップの使い方を簡単に説明したものです!