如何在App.tsx属性变化时通知_app.js更新暗黑模式主题

问题根因 #

你当前方案失效的核心原因违反了React Context的消费规则：useContext 只能消费当前组件父级链上的对应Provider提供的值。你在MyApp组件内部调用useContext(MyContext)，而MyApp本身才是这个Context的Provider返回者，当前组件外层没有对应的Provider，所以你拿到的myContext永远是Context的默认初始值，自然不会响应子树内的Context值变化。

解决方案 #

根据你的实际场景选择对应方案即可：

场景1：需要监听的darkMode是MyApp入参someProps传入的

直接监听props变化即可，不需要绕Context：

function MyApp({ Component, pageProps, someProps }) {
  React.useEffect(() => {
    alert('helloworld');
    // 在此处执行你需要的状态更新逻辑
  }, [someProps.darkMode]); // 直接监听props里的暗黑模式属性

  return (
    <MyContext.Provider value={someProps}>
      <Component {...pageProps} />
    </MyContext.Provider>
  );
}

export default MyApp;

场景2：需要监听子组件（如你提到的App.tsx）修改的暗黑模式值

你需要把暗黑模式的状态定义在_app.js内部，子组件通过Context修改这个状态，你直接监听内部状态变化即可：

function MyApp({ Component, pageProps }) {
  // 暗黑模式状态定义在_app层
  const [darkMode, setDarkMode] = React.useState(false);

  // 监听内部状态变化
  React.useEffect(() => {
    alert('helloworld');
    // 在此处执行你需要的状态更新逻辑
  }, [darkMode]);

  // 把状态和修改方法透传给Context，子组件可调用setDarkMode修改暗黑模式
  return (
    <MyContext.Provider value={{ darkMode, setDarkMode }}>
      <Component {...pageProps} />
    </MyContext.Provider>
  );
}

export default MyApp;

内容的提问来源于stack exchange，提问作者doorman