小道具の基本: パート 1

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

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

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

ParentPlant() {
  return <ChildPlant text="Hey Farmer! Says plant" number={2} isPlant={true} /> 
}

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

プロップの受信:

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

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

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

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

これを視覚化する良い方法は次のとおりです:

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

以上が小道具の基本: パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。