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）来维护菜单抽屉的状态。单击汉堡包图标可切换此全局状态值，抽屉本身会自行处理其类（如果open，则附加state.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
  }
}

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

1 个答案: