我怎样才能将我的js代码迁移到reactjs并调用它？

Question

大家好，我是新手，所以请原谅我的愚蠢问题 一个角度为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

您的迁移代码缺少最重要的部分，将新功能绑定到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;
    };
}