「REDO」useContextを使用して表示

8862 ワード
React テキストリンク

質問する


構造の過程では,component中のcomponentは数え切れないほどあり,propsとしていちいち受信する必要がある場合となった.

たくさんの道具!

解決する


useContextの使用


まず、グローバル変数としてcreateContextを使用します.
import React, { useContext } from 'react';
useContext importを追加します.
let stockContext = React.createContext()
グローバル変数として宣言します.
変数を適用したいドーム領域にマークします.Providerを追加します.
 <stockContext.Provider value={stock}>
  <div className="row">
  </div>
 </stockContext.Provider>
value:追加するデータを宣言

function Card( props ) {
 let id = props.shoes.id + 1
 /* usecontext 훅 사용 */
 const letStock = useContext( stockContext )

 return (
   <div className="col-md-4">
     <img src={`https://codingapple1.github.io/shop/shoes${id}.jpg`} alt="" width="100%" />
     <h4>{props.shoes.title}</h4>
     <p>{props.shoes.content} & {props.shoes.price}</p>
     <Button as="input" type="reset" value="더보기" />
     <p>재고 : {letStock[props.shoes.id]}</p>
   </div>
 )
}
useContext( stockContext )宣言された変数のuseContextにグローバル変数を配置
   <p>재고 : {letStock[props.shoes.id]}</p>
これでいい

他のファイルのインポートを試みる


App.js
// import 할 변수를 선언
export let stockContext2 = React.createContext()
Detail.js
//app.js 에서 받아온 변수
import { stockContext2 } from './App.js'
function Detail( props ) {
 //변수 선언
 const context = useContext( stockContext2 )
   return (
       <div>test {context} </div>
   )
}
このように使えばいいです!

悟る


コンポーネントの増加に伴いpropsの使用はますます複雑になり、useContextを使用するとpropsによる複雑な管理の作業量を減らすことができ、コードをより短くし、データ表示もより簡単になる.
ねじ(Thread)
Asyncronous