javascript - NextJS 页面更改后自定义 JS 中断？

Question

我一直在开发我的个人网站，并使用 NextJS 将其打造成 PWA。每当我从应用程序更改页面时，导入到顶级组件 (_document.js) 的自定义 JS 就会停止在其他页面上工作，除非我重新加载页面。有人有解决方案或遇到类似的事情吗？

这是我录制的视频的链接，展示了我正在谈论的内容。如果需要的话我也可以提供代码。我觉得这是一个相对容易的修复，但这是我的第一次尝试和下一步，仍在适应环境。

https://drive.google.com/file/d/16doKPpJPDHhFcYLiX8lZEWGoTf8b19MM/view

//navbar.js (imported js file)
const menu = document.querySelector('#hamburger');
const wrapper = document.querySelector('.wrapper');
const drawer = document.querySelector('.navbar');

menu.addEventListener('click', function(event) {
  drawer.classList.toggle('open');
  event.stopPropagation();
});
wrapper.addEventListener('click', function() {
  drawer.classList.remove('open');
});

Answer 1

我认为您认为 React 应用程序就像传统(静态)Web 应用程序 - 用 PHP 编写或通过模板呈现为 HTML。

对于 React，这是一种独立于 React 操作 DOM 的反模式。

在这种特殊情况下，更好的方法是使用全局状态(例如，您可以使用 Redux)来维护菜单抽屉的状态。单击汉堡包图标会切换此全局状态值，抽屉本身会自行处理其类(如果 state.open，则附加 open)。

您的组件如下所示:

const Header = ({ toggleMenu }) => {
  return (
    <div>
      ...
      <button onClick={ toggleMenu } />
    </div>
  )
}

export default connect(null, { toggleMenu })(Header)

const Menu = ({ isOpen }) => {
  return (
    <div className={ isOpen ? "open" : "" }>
      ...
    </div>
  )
}

export default connect(function (state) {
  return { isOpen: state.menu.open }
})(Menu)

你的 Action 创造者

function toggleMenu () {
  return { action: TOGGLE_MENU }
}

和你的 reducer

function menuReducer(previousState, action) {
  switch (action.action) {
    case TOGGLE_MENU:
      return { ...previousState: open: !previousState.open }
    default:
      return previousState
  }
}