createContext

createContext 讓您可以建立元件可以提供或讀取的Context。

const SomeContext = createContext(defaultValue)

參考
用法
- 建立 Context
- 從檔案匯入和匯出 Context
疑難排解
- 我找不到更改 Context 值的方法

參考

`createContext(defaultValue)`

在任何元件之外呼叫 createContext 來建立 Context。

import { createContext } from 'react';

const ThemeContext = createContext('light');

請參閱下面的更多範例。

參數

defaultValue：當讀取 Context 的元件上方樹狀結構中沒有相符的 Context 提供者時，您希望 Context 擁有的值。如果您沒有任何有意義的預設值，請指定 null。預設值意在作為「最後手段」的後備方案。它是靜態的，永遠不會隨著時間改變。

回傳值

createContext 會回傳一個 Context 物件。

Context 物件本身不包含任何資訊。它代表其他元件讀取或提供的 Context 是*哪一個*。通常，您會在上面的元件中使用 SomeContext.Provider 來指定 Context 值，並在下面的元件中呼叫 useContext(SomeContext) 來讀取它。Context 物件有一些屬性

SomeContext.Provider 讓您可以將 Context 值提供給元件
SomeContext.Consumer 是一種替代且很少使用的讀取 Context 值的方法

`SomeContext.Provider`

將您的元件包裝在一個 Context 提供者中，以為內部所有元件指定此 Context 的值

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

屬性
`value`：您想要傳遞給所有在此提供者內讀取此 context 的組件的值，無論它們嵌套多深。context 值可以是任何類型。在提供者內部呼叫 `useContext(SomeContext)` 的組件會收到它上方最內層對應 context 提供者的 `value` 值。

`SomeContext.Consumer`

在 useContext 出現之前，有一種較舊的方法來讀取 context

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

雖然這種較舊的方法仍然有效，但新編寫的程式碼應該使用 useContext() 來讀取 context：

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

屬性 (Props)

children：一個函式。React 將使用與 useContext() 相同的演算法確定的目前 context 值來呼叫您傳遞的函式，並渲染您從此函式返回的結果。每當父組件的 context 發生變化時，React 也將重新運行此函式並更新 UI。

用法

建立 context

Context 讓組件可以將資訊深入傳遞，而無需明確地傳遞 props。

在任何組件之外呼叫 createContext 來建立一個或多個 context。

import { createContext } from 'react';

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

createContext 會返回一個context 物件。組件可以透過將其傳遞給 useContext() 來讀取 context。

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

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

預設情況下，它們接收的值將是您在建立 context 時指定的預設值。然而，單獨使用它並沒有用，因為預設值永遠不會改變。

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 組件及其內部的任何組件，無論嵌套多深，都將「看到」傳遞的 context 值。如果傳遞的 context 值發生變化，React 也將重新渲染讀取 context 的組件。

閱讀更多關於讀取和提供 context 的資訊，並查看範例。

從檔案匯入和匯出 context

通常，不同檔案中的組件需要存取相同的 context。這就是為什麼通常在單獨的檔案中宣告 context 的原因。然後，您可以使用 export 陳述式使 context 可供其他檔案使用。

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

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

在其他檔案中宣告的組件可以使用 import 陳述式來讀取或提供此 context。

// 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 值的方法

像這樣的程式碼指定了預設 context 值。

const ThemeContext = createContext('light');

此值永遠不會改變。React 僅在找不到上方匹配的提供者時才使用此值作為後備。

要讓 context 隨著時間改變，請新增狀態，並將組件包裝在 context 提供者中。

上一頁cache

下一頁lazy