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

Question

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

这是我录制的视频的链接，展示了我在说什么。如果需要，我也可以提供代码。我觉得这是一个相对容易解决的问题，但这是我的第一次尝试和 Next 并且仍然习惯了环境。

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)

你的动作创建者

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

还有你的减速器

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