如何在 _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