Javascript $（此）内部React组件

我试图在滚动页面时更改url

我正在使用jQuery。滚动查看。问题是，$this上的这个会抓住React组件的上下文。如何更改此代码以使其正常工作

import React from 'react';
import $ from 'jquery';

class Main extends React.Component {
  componentDidMount() {
    $(() => {
      let currentId = 'about';

      $(document).scroll(() => {
        $('.path').each(() => {
          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);
            currentId = path;
          }
       });
      });
     }); 
  }

 render() {
     return (
       <main role="main">
         <About />
         <Contact />
       </main>
     );
   }
 }


export default Main;

错误：

作为补充，我正在关注这些“助手”，并根据我的需要调整它们：

这个问题的公认答案是：

本节：

---

当您需要动态上下文时，只需使用普通函数

$('.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);
          }
       });

因此，解决方案是公认的答案。问题与我添加匿名函数作为.each方法的参数的方式有关。使用函数{…}，而不是=>{…}

---

你是对的。这是个错误。我会更正它。组件中的包装“$=>{/…}”是否与常规jQuery document.ready函数相同？如果是这样，您的代码将永远不会运行，因为您的组件将在document.ready事件触发后装载。@mccambridge如果已到达页面已加载的点，则document ready将立即执行。作为补充：我正在遵循此JSFIDLE并使其适应我的需要：@mccambridge我将尝试它。谢谢：不幸的是，它不起作用。我总是收到与以前相同的错误：TypeError:elem.getClientRects不是函数。然后指向const distance=top-$this.offset.top；执行受阻的地方。@Luca Fabbri我不得不回滚你的编辑，因为这违背了我的想法。这在$'.path'中。每个回调都是dom元素。但这正是我的答案：很抱歉我并没有注意到：我只是在拆下包装纸的时候测试了它。

$(() => {
      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;
          }
        });
      });
    });