$（this）在React组件中

Question

我正在尝试在滚动页面时更改URL。

我正在为此使用jQuery .scroll（）。问题是e.g. div#first p#myParagraph span.bolder 上的this抓取了React组件的上下文。如何更改此代码以使其正常工作？

$(this)

错误：

作为补充，我正在关注这些“帮助者”并使它们适应我的需求：

• 此问题的可接受答案： Change url when manually scrolled to an anchor?

• 此jsfiddle：jsfiddle

Answer 1

在需要动态上下文时只需使用正常功能

$('.path').each(function() {
          const top = window.pageYOffset;
          const distance = top - $(this).offset().top;
          const path = $(this).attr('id');

          if (distance < 50 && distance > -50 && currentId !== path) {
            window.history.pushState(null, null, '/' + path);
          }
       });

Answer 2

因此，解决方案是可接受的答案。问题与我将匿名函数添加为.each()方法的参数的方式有关。代替() => {...}，使用function(){...}。

$(() => {
      let currentPath = '';
      $(document).scroll(() => {
        $('.path').each(function () {
          const top = window.pageYOffset;
          const distance = top - $(this).offset().top;
          const path = $(this).attr('id');

          if (distance < 30 && distance > -30 && currentPath != path) {
            window.history.replaceState(`/${path}`, 'Title', `/${path}`);
            currentPath = path;
          }
        });
      });
    });