javascript - 我如何将我的js代码迁移到reactjs并调用它？

Question

大家好，我是新手，所以请原谅我提出的愚蠢问题Angular 中的 js 函数可以让我同时水平滚动两个 div

  ngOnInit() {
    this.settActivityAndTaskCells();
    //-------------------Begin Scroll-------------------
    var isSyncingLeftScroll = false;
    var isSyncingRightScroll = false;
    var leftDiv = document.getElementById('top');
    var rightDiv = document.getElementById('bot');

    leftDiv.onscroll = function () {
      if (!isSyncingLeftScroll) {
        isSyncingRightScroll = true;
        rightDiv.scrollLeft = this.scrollLeft;
      }
      isSyncingLeftScroll = false;
    }

    rightDiv.onscroll = function () {
      if (!isSyncingRightScroll) {
        isSyncingLeftScroll = true;
        leftDiv.scrollLeft = this.scrollLeft;
      }
      isSyncingRightScroll = false;
    }
    //-------------------End Scroll-------------------
  }

所以我在reactjs上像这样改变它

Scrolling = () => {
    var isSyncingLeftScroll = false,
      isSyncingRightScroll = false,
      leftDiv = document.getElementById('top'),
      rightDiv = document.getElementById('bot');

    if (!isSyncingLeftScroll) {
      isSyncingRightScroll = true;
      rightDiv.scrollLeft = this.scrollLeft;
    }
    isSyncingLeftScroll = false;

    if (!isSyncingRightScroll) {
      isSyncingLeftScroll = true;
      leftDiv.scrollLeft = this.scrollLeft;
    }
    isSyncingRightScroll = false;

  }

并在 div 中调用它，例如

但滚动不起作用感谢任何花时间帮助我、审查并提供反馈的人。

Answer 1

您的迁移代码缺少最重要的部分，即将新函数绑定(bind)到 scroll 事件。应该是:

Scrolling = () => {
    var isSyncingLeftScroll = false,
        isSyncingRightScroll = false,
        leftDiv = document.getElementById('top'),
        rightDiv = document.getElementById('bot');

    leftDiv.onscroll = () => {
        if (!isSyncingLeftScroll) {
            isSyncingRightScroll = true;
            rightDiv.scrollLeft = this.scrollLeft;
        }
        isSyncingLeftScroll = false;
    };

    rightDiv.onscroll = () => {
        if (!isSyncingRightScroll) {
            isSyncingLeftScroll = true;
            leftDiv.scrollLeft = this.scrollLeft;
        }
        isSyncingRightScroll = false;
    };
}