رد الفعل useContext Hook
رد الفعل السياق
سياق رد الفعل هو وسيلة لإدارة الدولة على الصعيد العالمي.
يمكن استخدامه مع useState
الخطاف لمشاركة الحالة بين المكونات المتداخلة بعمق بسهولة أكبر من استخدامها useState
بمفردها.
المشكلة
يجب أن يتم الاحتفاظ بالحالة بواسطة المكون الرئيسي الأعلى في المكدس الذي يتطلب الوصول إلى الحالة.
للتوضيح ، لدينا العديد من المكونات المتداخلة. يحتاج المكون الموجود في الجزء العلوي والسفلي من المكدس إلى الوصول إلى الحالة.
للقيام بذلك بدون سياق ، سنحتاج إلى تمرير الحالة كـ "props" من خلال كل مكون متداخل. وهذا ما يسمى "الحفر الدعامة".
مثال:
تمرير "الدعائم" من خلال المكونات المتداخلة:
import { useState } from "react";
import ReactDOM from "react-dom";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));
على الرغم من أن المكونات 2-4 لم تكن بحاجة إلى الحالة ، كان عليهم تمرير الحالة حتى تصل إلى المكون 5.
الحصول على شهادة!
95 دولارًا ENROLL
الحل
الحل هو خلق السياق.
خلق السياق
لإنشاء سياق ، يجب عليك استيراده createContext
وتهيئته:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
بعد ذلك ، سنستخدم موفر السياق لالتفاف شجرة المكونات التي تحتاج إلى سياق الحالة.
مزود السياق
قم بلف المكونات الفرعية في مزود السياق وقم بتوفير قيمة الحالة.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
الآن ، ستتمتع جميع المكونات في هذه الشجرة بإمكانية الوصول إلى سياق المستخدم.
استخدم useContext
الخطاف
من أجل استخدام السياق في مكون فرعي ، نحتاج إلى الوصول إليه باستخدام useContext
الخطاف.
أولاً ، قم بتضمين useContext
في بيان الاستيراد:
import { useState, createContext, useContext } from "react";
ثم يمكنك الوصول إلى سياق المستخدم في جميع المكونات:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
مثال كامل
مثال:
إليك المثال الكامل باستخدام سياق React:
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));