createContext

Довідник

createContext(defaultValue)

Виклик createContext поза будь-якими компонентами для створення контексту.

import { createContext } from 'react';

const ThemeContext = createContext('light');

Дивіться більше прикладів нижче.

Параметри

• defaultValue: Значення, яке ви хочете, щоб контекст мав, коли немає відповідного постачальника контексту у дереві над компонентом, який читає контекст. Якщо ви не маєте жодного значення за замовчуванням, вкажіть null. Значення за замовчуванням призначене для використання в якості "останньої надії". Воно є статичним і ніколи не змінюється з часом.

Повернення

createContext повертає об'єкт контексту.

Сам об'єкт контексту не містить жодної інформації. Він представляє контекст, який читають або надають інші компоненти. Зазвичай, ви використовуєте SomeContext.Provider у компонентах вище, щоб вказати значення контексту, і викликаєте useContext(SomeContext) у компонентах нижче, щоб прочитати його. Об'єкт контексту має декілька властивостей:

• SomeContext.Provider Дозволяє надати значення контексту компонентам.
• SomeContext.Consumer є альтернативним і рідко використовуваним способом читання значення контексту.

SomeContext.Provider

Обгортайте ваші компоненти в провайдер контексту, щоб вказати значення цього контексту для всіх компонентів всередині:

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

Пропси

• value: Значення, яке ви хочете передати всім компонентам, що читають цей контекст всередині цього провайдера, незалежно від глибини. Значення контексту може бути будь-якого типу. Компонент, який викликає useContext(SomeContext) всередині провайдера, отримує значення найглибшого відповідного провайдера контексту над ним.

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 викличе передану вами функцію зі значенням поточного контексту, визначеним за тим же алгоритмом, що і useContext(), і відрендерить результат, який ви повернете з цієї функції. React також повторно запустить цю функцію і оновлюватиме інтерфейс щоразу, коли змінюється контекст батьківських компонентів.

Використання

Створення контексту

Контекст дозволяє компонентам передавати інформацію вглиб без явної передачі пропсів.

Викличте createContext поза будь-якими компонентами, щоб створити один або кілька контекстів.

import { createContext } from 'react';

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

createContext повертає контекстний об'єкт </CodeStep> . Компоненти можуть читати контекст, передаючи його в <a href="/reference/react/useContext"><код>useContext():

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

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

За замовчуванням, значення, які вони отримають, будуть значеннями за замовчуванням</CodeStep> які ви вказали під час створення контекстів. Однак саме по собі це не є корисним, оскільки значення за замовчуванням ніколи не змінюються.</p> <p>Контекст корисний тим, що ви можете <strong>надавати інші, динамічні значення з ваших компонентів:</strong></p> <pre><code data-meta="{8-9,11-12}" class="language-js">function App() { const [theme, setTheme] = useState('dark'); const [currentUser, setCurrentUser] = useState({ name: 'Taylor' }); // ... return ( <ThemeContext.Provider value={theme}> <AuthContext.Provider value={currentUser}> <Сторінка /> </AuthContext.Provider> </ThemeContext.Provider> ); }

Тепер компонент Page і всі компоненти всередині нього, незалежно від глибини, "бачитимуть" передані значення контексту. Якщо передані значення контексту зміняться, React також повторно відрендерить компоненти, що читають контекст.

Дізнайтеся більше про читання та надання контексту і перегляньте приклади.

Імпорт та експорт контексту з файлу

Часто компоненти у різних файлах потребують доступу до одного й того самого контексту. Ось чому прийнято оголошувати контексти в окремому файлі. Тоді ви можете використовувати інструкцію експорт, щоб зробити контекст доступним для інших файлів:

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

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

Компоненти, оголошені в інших файлах, можуть використовувати імпорт для читання або надання цього контексту:

// 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>
  );
}

Це працює подібно до імпорту та експорту компонентів.

Налагодження

Я не можу знайти спосіб змінити значення контексту

Такий код задає значення контексту за замовчуванням :

const ThemeContext = createContext('light');

Це значення ніколи не змінюється. React використовує це значення лише як запасний варіант, якщо не може знайти відповідний провайдер вище.

Щоб контекст змінювався з часом, додайте стан та обгорніть компоненти в провайдер контексту.