如何在 _document.js 和 Next.js 上的頁面之間共享 React 上下文？

Question

假設我有這樣的背景：

export const ThemeContext = createContext();

export function ThemeWrapper({ children }) {
  const sharedState = {
    darkMode: false,
  };

  return (
    <ThemeContext.Provider value={sharedState}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useThemeContext() {
  return useContext(ThemeContext);
}

我可以像這樣在_document.js上訪問它：

import Document, { Html, Head, Main, NextScript } from "next/document";
import { ThemeWrapper, ThemeContext } from "../context/theme";

class MyDocument extends Document {
  static contextType = ThemeContext;
  render() {
    console.log("theme", this.context);
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

class Wrapped extends Document {
  render() {
    return (
      <ThemeWrapper>
        <MyDocument />
      </ThemeWrapper>
    );
  }
}

export default Wrapped;

現在我還想從一個頁面訪問這個上下文：

import { useThemeContext } from "../context/theme";

const SomePage = () => {
  const theme = useThemeContext();

  console.log("theme", theme);

  return (
    <div>Hi, I'm a page</div>
  );
};

_document.js在第一次加載頁面時在 Next.js 控制台上注銷theme { darkMode: false }但每次導航到它時SomePage在 Chrome 控制台上注銷theme undefined 。

有什么建議么？

我需要根據上下文切換html標簽上的一些 class 。 嘗試使用 Tailwind CSS 手動切換暗模式。

Answer 1

用ThemeWrapper包裝_document不會讓您訪問頁面內的上下文（可能是因為它僅在服務器中呈現），您需要為此包裝_app 。 請注意， _document不會在上下文 state 更改時重新渲染。

對於這個特定的用例，另一種方法是使用next-themes 。

如何在 _document.js 和 Next.js 上的頁面之間共享 React 上下文？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-02-12 20:50:08

如何在 _document.js 和 Next.js 上的頁面之間共享 React 上下文？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-02-12 20:50:08

解決方案1
1 已采納 2021-02-12 20:50:08