时间戳

首页 > 解决方案 > 丹·阿布拉莫夫的主题变化逻辑

javascript - 丹·阿布拉莫夫的主题变化逻辑

问题描述

你能解释一下这个window.__onThemeChange函数是如何工作的吗？我试图实现 Dan Abramov 在 gatsby 应用程序中设置暗模式的方法，但我不明白上述功能是如何工作的。首先，它是从内部定义和调用的setTheme()，newTheme作为参数。

(function () {
  window.__onThemeChange = function () { };
  function setTheme (newTheme) {
    window.__theme = newTheme;
    preferredTheme = newTheme;
    document.body.className = newTheme;
    window.__onThemeChange(newTheme);
  }
  var preferredTheme;
  try {
    preferredTheme = localStorage.getItem('theme');
  } catch (err) { }
  window.__setPreferredTheme = function (newTheme) {
    setTheme(newTheme);
    try {
      localStorage.setItem('theme', newTheme);
    } catch (err) { }
  }
  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
  darkQuery.addListener(function (e) {
    window.__setPreferredTheme(e.matches ? 'dark' : 'light')
  });
  setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
})();

然后在组件中使用这个函数来设置状态：

    class Layout extends React.Component {
      state = {
        theme: null,
      };
      componentDidMount() {
        this.setState({ theme: window.__theme });
        window.__onThemeChange = () => {
          this.setState({ theme: window.__theme });
        };
      }

这个window.__onThemeChange函数是刚刚定义的，然后在没有主体的情况下调用，只使用一个参数，newTheme然后在 Component 中重新定义，作为改变状态的一种方式。丹的回购链接：

定义的文件： https ://github.com/gaearon/overreacted.io/blob/master/src/html.js

组件： https ://github.com/gaearon/overreacted.io/blob/master/src/components/Layout.js

标签： javascriptgatsby

解决方案

我设法弄明白了。window.__onThemeChange在没有正文的 html.js（这是全局文件）中定义，然后在 Layout 组件中定义此正文（以连接此组件的状态），然后从 html.js 再次调用。丹的方法令人惊叹。

推荐阅读