useContext 使用
第一步：创建store文件夹，下面创建 contentext.js
// 代码
import React from 'react';
const CartContext = React.createContext({
items: [],
totalAmount: 0,
totalPrice: 0,
addItem: () => {
},
removeItem: () => {
},
clearCart: ()=>{
}
});
export default CartContext;
第二步：
在app.js中
mport CartContext from "./store/cart-context";
<CartContext.Provider value={{...cartData, addItem, removeItem, clearCart}}>
<div>
<FilterMeals onFilter={filterHandler}/>
<Meals
mealsData={mealsData}
/>
<Cart/>
</div>
</CartContext.Provider>
注意： CartContext.Provider 是最重要的，这个是相当于全局有了这个就可以将content使用了
调用：比如cart.js 文件中使用
import React, { useContext, useState } from 'react';
import CartContext from "../../store/cart-context";
const ctx = useContext(CartContext);
console.log("ctx", ctx)
// 添加一个显示详情页的函数
const toggleDetailsHandler = () => {
if (ctx.totalAmount === 0) {
setShowDetails(false);
return;
};
setShowDetails(prevState => !prevState);
};
const showCheckoutHandler = () => {
if (ctx.totalAmount === 0) return;
setShowCheckout(true);
};
