مثال عملي: إدارة حالة السلة (Shopping Cart)
1. إنشاء السياق
أولاً، نقوم بإنشاء سياق جديد لإدارة حالة السلة.
// CartContext.js
import { createContext } from 'react';
export const CartContext = createContext([]);
|
2. توفير قيمة السياق
نقوم بلف المكونات في Provider لتوفير قيمة السياق.
// App.js
import React, { useState } from 'react';
import { CartContext } from './CartContext';
import ProductList from './ProductList';
import Cart from './Cart';
function App() {
const [cart, setCart] = useState([]);
const addToCart = (product) => {
setCart((prevCart) => [...prevCart, product]);
};
return (
<CartContext.Provider value={{ cart, addToCart }}>
<ProductList />
<Cart />
</CartContext.Provider>
);
}
export default App;
|
3. قراءة قيمة السياق
نستخدم useContext لقراءة قيمة السياق في مكونات فرعية.
// ProductList.js
import React, { useContext } from 'react';
import { CartContext } from './CartContext';
function ProductList() {
const { addToCart } = useContext(CartContext);
const products = [
{ id: 1, name: 'Product 1' },
{ id: 2, name: 'Product 2' },
];
return (
<div>
<h1>Products</h1>
<ul>
{products.map((product) => (
<li key={product.id}>
{product.name} <button onClick={() => addToCart(product)}>Add to Cart</button>
</li>
))}
</ul>
</div>
);
}
export default ProductList;
|
// Cart.js
import React, { useContext } from 'react';
import { CartContext } from './CartContext';
function Cart() {
const { cart } = useContext(CartContext);
return (
<div>
<h1>Cart</h1>
<ul>
{cart.map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
</div>
);
}
export default Cart;
|
شرح الكود
- CartContext.js: نقوم بإنشاء سياق جديد لإدارة حالة السلة.
- App.js: نستخدم
CartContext.Provider لتوفير قيمة السياق لجميع المكونات داخل ProductList و Cart. كما أضفنا دالة addToCart لإضافة المنتجات إلى السلة. - ProductList.js: نستخدم
useContext لقراءة دالة addToCart من السياق وإضافة المنتجات إلى السلة عند الضغط على الزر. - Cart.js: نستخدم
useContext لقراءة محتويات السلة وعرضها.
النتيجة
عند تشغيل التطبيق، يمكنك إضافة منتجات إلى السلة من خلال الضغط على الأزرار في ProductList. سيتم تحديث مكون Cart ليعرض المنتجات المضافة إلى السلة.
تعليقات
إرسال تعليق