ליצור הקשר

const SomeContext = createContext(defaultValue)

• הפניה
  • createContext(defaultValue)
  • SomeContext.Provider
  • SomeContext.Consumer
• שימוש
  • יצירת הקשר
  • ייבוא ​​וייצוא הקשר מקובץ
• פתרון תקלות
  • אני לא מוצא דרך לשנות את ערך ה-context

הפניה

createContext(defaultValue)

קראו ל-createContext מחוץ לכל קומפוננטה כדי ליצור הקשר.

import { createContext } from 'react';

const ThemeContext = createContext('light');

עוד דוגמאות נוספות.

פרמטרים

• defaultValue: הערך שתרצו של-הקשר יהיה כשאין ספק ההקשר תואם בעץ מעל הקומפוננטה שקוראת את ההקשר. אם אין לכם ערך ברירת מחדל משמעותי, ציינו null. ערך ברירת המחדל מיועד כ-fallback של “מוצא אחרון”. הוא סטטי ולעולם לא משתנה לאורך הזמן.

מחזירה

createContext מחזירה אובייקט הקשר.

מעצם-הקשר עצמו לא מידע. הוא מכוון איזה הקשר קומפונטות אחרות קוראות או מספקות. בדרך כלל תשתמשו ב-SomeContext.Provider בקומפוננטות למעלה כדי לציין את ערך ההקשר, ותקראו ל-useContext(SomeContext) בקומפוננטות למטה כדי לקרוא אותו. לאובייקט ה-context יש כמה מאפיינים:

• SomeContext.Provider לאפשר את ערך ה-context לקומפוננטות.
• SomeContext.Consumer הוא דרך חלופית ודירה לקרוא את ערך ההקשר.

SomeContext.Provider

עטפו את הקומפוננטות שלכם בספק ההקשר כדי לציין את ערך ההקשר הזה לכל הקומפוננטות בתוכו:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

אבזרים

• value: הערך שברצונכם להעביר לכל הקומפוננטות שקוראות את ההקשר הזה בתוך ה-provider הזה, לא משנה כמה עמוק. ערך ההקשר יכול להיות מכל סוג. קומפונטה שקוראת ל-useContext(SomeContext) בתוך ה-provider תקבל את ה-value של ספק ההקשר התואם הכי פנימי שמעליה.

SomeContext.Consumer

לפני ש-useContext קיימת, הייתה דרך ישנה יותר לקרוא את ההקשר:

function Button() {
  // 🟡 Legacy way (not recommended)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

למרות שהדרך הישנה הזו עדיין עובדת, קוד חדש צריך לקרוא את ההקשר בעזרת useContext() במקום:

function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

אבזרים

• children: פונקציה. React תקרא לפונקציה שתעבירו עם ערך ה-context הנוכחי שנקבע על ידי אותו אלגוריתם שבו משתמשת useContext(), ותרנדר את התוצאה שתחזירו מהפונקציה הזו. React גם תריץ את הפונקציה הזו שוב ותעדכן את ה-UI בכל פעם שה-context מהקומפונטות ההורה משתנה.

שימוש

יצירת הקשר

הקשר יכול לקומפוננטות להעביר מידע עמוק יותר בעץ בלי להעביר props במפורש.

קראו ל-createContext מחוץ לכל קומפוננטה כדי ליצור הקשר אחד או יותר.

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext מחזירה אובייקט הקשר. קומפוננטות יכול לקרוא את ההקשר על ידי העברתו ל-useContext():

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

כברירת מחדל, הערכים שהן יקבלו יהיו ערכי ברירת המחדל שציינתם בעת יצירת ה-context. אבל בפני עצמו זה לא שימושי, כי ערכי ברירת המחדל לעולם לא משתנים.

ההקשר שימושי כי אפשר לספק ערכים אחרים, דינמיים, מתוך הקומפוננטות שלכם:

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

עכשיו קומפוננטת Page וכל קומפוננטה בתוכה, לא משנה כמה עמוק, “יראו” את ערכי ההקשר שהוא עבר. אם ערכי ההקשר משתנים, React תרנדר מחדש גם את הקומפוננטות שקוראות את ההקשר.

קראו עוד על קריאה וסיפוק הקשר וראו דוגמאות.

ייבוא ​​וייצוא הקשר מקובץ

לעתים קרובות קומפונטות בקבצים שונים צריכות גישה לאותו הקשר. אז מקובל להצהיר על הקשרים בקובץ נפרד. לאחר מכן אפשר להשתמש ב-export statement כדי להפוך את ההקשר לזמין לקבצים אחרים:

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

קומפונטות שמוצהרות בקבצים אחרים יכולים להשתמש ב-import כדי לקרוא או לספק את ההקשר הזה:

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

זה עובד בדומה ל-ייבוא ​​וייצוא קומפונטות.

פתרון תקלות

אני לא מוצא דרך לשנות את ערך ה-context

קוד כזה מפרט את ערך ההקשר ברירת המחדל:

const ThemeContext = createContext('light');

הערך הזה לעולם לא מתרוצץ. React משתמשת בו רק כ-fallback אם היא לא מוצאת ספק תואם מעל.

כדי לגרום ל-context להשתנות לאורך הזמן, הוסיפו state ועטפו קומפונטות ב-context provider.