如何在 Gatsby 时执行 JS<link> 组件被点击

Question

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

然而，使用 Gatsby 的<Link>内部链接组件，当点击一个新的内部页面时，“无滚动”类在移动菜单关闭的情况下保持原位......最终结果是呈现新页面，但是卷轴被锁定，汉堡包菜单无法访问。

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

这是我的 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元素。 另一方面， React 和 Gatsby 处理和操作虚拟 DOM (vDOM) 。 播放和操作两者会导致更多的潜在问题，比如一个人不知道另一个人何时发生变化，反之亦然，在真实场景中，这会转化为元素在您期望的时候没有被重新水化：类在您想要的时候没有被删除，元素未正确显示（未隐藏/未显示）等。您可以在基于 React 的方法中使用useRef挂钩和.current选项来获得相同的结果。 您仍然可以使用它，但需要您自担风险并牢记这一点。

也就是说，我不同意@Lysmask 的回答。 onClick可以在课程的Link组件中使用，但在导航之前它将被忽略，因为您没有锁定或阻止该行为，因此您的onClick function 将被忽略。 最后， Link组件被翻译成一个锚点（ <a> ）。

鉴于这种情况，您可以做的是使用触发您的 function 的自定义 React 组件“伪造” 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 。 这个 function 将在每次路由更改时触发，包括应用程序的初始加载。 您可以轻松地在那里使用您的 function 来删除无滚动 class。它还公开了以前的位置（ 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挂钩，它会在每次组件重新渲染时运行。 有了这个 - 你的汉堡包菜单当前打开了 true/false state，并且根据它，你切换你的类。

就像是。

const [openHamburgerMenu, setOpenHamburgerMenu] = useState(false)