ショッピングモールアイテム(ネストされたコンポーネント)

詳細ページに在庫量を表示する機能を実現したい場合.
このとき、Infoという名前のコンポーネントに在庫量のコードを実装し、Detailコンポーネントとは独立したコンポーネントを作成します.この過程は以下の通りである.

各商品の在庫量をstateに保存するのが習慣であり、最上位コンポーネントに保存して受け入れる方法で保存してこそ、データは流れないことが知られています.

では、InfoはどのようにしてAppに格納されている在庫を取得しますか?

同じように道具を使えばいいです.
Detailラベルから在庫を受け取ります.

(App.js)
function App(){
  let [재고, 재고변경] = useState([10,11,12]);
  return (
    <div>
      <HTML많은곳/>
      <Detail 재고={재고} />
    </div>
  )
}

DetailコンポーネントのInfoラベルも同様に在庫を受け取りますが、この時点で一度受け取ったことがあるのでpropsを貼り付けます.

function Detail(props){
  return (
    <div>
      <HTML많은곳/>
      <Info 재고={props.재고}></Info>
    </div>
  )
}
function Info(props){
  return <p>재고 : { props.재고[0] }</p>
}

整理)
サブコンポーネントがいくらあってもpropsを使えばデータを転送できます.
ステータス変更関数も受信した場合はpropsを使用します
(ex.靴={靴}靴変更関数={靴変更関数})
しかし、多くの部品が道具地獄をもたらし、この問題を解決するために
Context APIまたはReduxを使用します.