单击Gatsby <Link>组件时如何执行JS

Question

当我的移动汉堡包菜单打开时，我使用JS添加CSS类，以防止在我的站点上滚动。

但是，使用盖茨比的<Link>组件进行内部链接时，当单击一个新的内部页面时，“无滚动”类将保持不变，移动菜单将关闭.最终的结果是呈现新的页面，但是滚动被锁定，汉堡包菜单无法访问。

我希望能够在点击Gatsby <Link>组件时执行JS，这样我就可以从适当的元素中删除“无滚动”类。

这是我的JS。

(function(){
    var burger = document.querySelector('#burger_container'),
        body = document.querySelector("body"),
        html = document.querySelector('html'),
        navMobile = document.querySelector('#nav_mobile'),
        nav = document.querySelector('#nav');

    burger.onclick = function() {

        navMobile.classList.toggle('menu_opened');
        nav.classList.toggle('menu_opened');
        body.classList.toggle('no-scroll');
        html.classList.toggle('no-scroll');
        
    }
}());

Answer 1

我非常不鼓励你使用你的片段。在这方面：

(function(){
    var burger = document.querySelector('#burger_container'),
        body = document.querySelector("body"),
        html = document.querySelector('html'),
        navMobile = document.querySelector('#nav_mobile'),
        nav = document.querySelector('#nav');

    burger.onclick = function() {

        navMobile.classList.toggle('menu_opened');
        nav.classList.toggle('menu_opened');
        body.classList.toggle('no-scroll');
        html.classList.toggle('no-scroll');
        
    }
}());

您直接指向DOM元素(因为使用了document.querySelector)，在本例中，您需要查找#burger_container、body、html、#nav_mobile和#nav元素。另一方面，因此，Gatsby对虚拟DOM (vDOM)进行处理和操作。。玩和操作这两者都会引起更多的潜在问题，比如一个不知道其他的变化，反之亦然，在实际场景中，当你期望的时候，这些元素就被转化为不属于再水化的元素:在你想要的时候没有被移除的类，没有正确显示的元素(没有隐藏/没有显示)等等。你可以用基于反应的方法使用钩子和.current选项实现相同的结果。你仍然可以使用它，但要承担你自己的风险，并牢记这一点。

尽管如此，我不同意@Lysmask回答的观点。onClick可以在课程的Link组件中使用，但它将在导航之前被忽略，因为您没有锁定或阻止该行为，因此您的onClick函数将被忽略。最后，将Link组件转换为锚(<a>)。

在这种情况下，您可以做的是使用触发函数的自定义function组件“伪造”Link组件，然后导航到所需的页面：

const fakeNavigation=(url)=>{
   //do your function here

   navigate(url)
}

<div onClick={()=>fakeNavigation('/contact')}>Some fake link</div>

navigate的工作方式与Link相同，但可以在应用程序内的编程导航中使用(更多细节请查看https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/#how-to-use-the-navigate-helper-function )。

另一个选项是使用多个gatsby-browser.js API之一。在这种情况下，onRouteUpdate。此功能将在每次路由更改中触发，包括应用程序的初始负载。您可以很容易地使用您的函数删除无滚动类。它还公开了前一个位置(prevLocation)和新位置(location)道具：

exports.onRouteUpdate = ({ location, prevLocation }) => {
  console.log('new pathname', location.pathname)
  console.log('old pathname', prevLocation ? prevLocation.pathname : null)

  //do your function here
}

Answer 2

与任何其他元素一样，您可以将onClick属性添加到Link本身。像这样的->

<Link onClick={ () => myfunction }> </Link>

否则，您可能会有一个useEffect钩子，它每次组件重新呈现时都会运行。有了这个-你有一个真实/假的状态，因为你的汉堡包菜单目前是开放的，并根据这一点，你切换你的课程。

就像。

const [openHamburgerMenu, setOpenHamburgerMenu] = useState(false)