1.新建context/index.js文件
2.导入createContext并按需导出其中的Provider和Consumer
注:如果不需要封装可以在组件中进行导入Provider和Consumer
import { createContext } from 'react'
export const { Provider, Consumer } = createContext()
3.根组件中使用Provider
在根组件中使用Provider进行包裹 value就是你要传的值,如果需要传入多个值使用对象的key:value进行进行传值
//App根组件
import { Provider } from './components/context'
export default function App (){
// 全选功能
const goodsCheckedAll = (state) => {
const newList = goodsList.map((it) => {
return { ...it, goods_state: state }
})
setGoodsList(newList)
}
// 数量选择
const setCount = (id, count) => {
const newList = goodsList.map((it) => {
if (it.id === id) {
return { ...it, goods_count: count }
} else {
return { ...it }
}
})
setGoodsList(newList)
}
return (
<Provider value={{ setCount: setCount, addCount: addCount }}>
<div className="app">
<MyHeader>购物车</MyHeader>
{goodsList.map((it) => (
<GoodsItem
key={it.id}
goods={it}
goodsListChecked={goodsListChecked}
/>
))}
<MyFooter goodsCheckedAll={goodsCheckedAll} goodsList={goodsList} />
</div>
</Provider>
)
}
4.子组件导入并使用Consumer进行包裹
Consumer的格式是固定的 下面代码中我传入的是一个对象 接收时对他进行结构了
<Comsumer>
{
(value)=>{ value是传入的数据}
}
</Comsumer>
import { Consumer } from '../context/index'
export default function MyCount ({ goods }) {
return (
<Consumer>
{({ setCount, addCount }) => {
return (
<div className="my-counter">
<button
disabled={goods.goods_count === 1}
type="button"
className="btn btn-light"
onClick={() => {
addCount(goods.id)
}}>
-
</button>
<input
type="number"
className="form-control inp"
value={goods.goods_count}
onChange={(e) => {
setCount(goods.id, e.target.value)
}}
/>
<button
type="button"
className="btn btn-light"
onClick={() => {
addCount(goods.id, 'add')
}}>
+
</button>
</div>
)
}}
</Consumer>
)
}