React realizes secondary linkage effect (staircase effect)

import "../css/Leftrightlinkage.less";
import React, { Component } from "react";
 
export default class Leftrightlinkage extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      list: [
        { id: 1, title: "List 1" },
        { id: 2, title: "List 2" },
        { id: 3, title: "List 3" },
        { id: 4, title: "List 4" },
        { id: 5, title: "List 5" },
        { id: 6, title: "List 6" },
        { id: 7, title: "List 7" },
        { id: 8, title: "List 8" },
        { id: 9, title: "List 9" },
        { id: 10, title: "List 10" },
      ],
      LeftList: [
        { id: 1, title: "List 1", height: 600 },
        { id: 2, title: "List 2", height: 600 },
        { id: 3, title: "List 3", height: 600 },
        { id: 4, title: "List 4", height: 600 },
        { id: 5, title: "List 5", height: 600 },
        { id: 6, title: "List 6", height: 600 },
        { id: 7, title: "List 7", height: 600 },
        { id: 8, title: "List 8", height: 600 },
        { id: 9, title: "List 9", height: 600 },
        { id: 10, title: "List 10", height: 600 },
      ],
      curr: 0, //Store subscript};
 
    // Add one by default because the first scrollTop value is 0
    this.LeftHeight = [0];
    //Scroll switch this.Swich = true;
  }
 
  // Rendering is complete and the distance between each list and the top is obtained componentDidMount() {
    // Defined as 0, each time you loop, the sum is the distance from the box to the top this.Height = 0;
    // Loop to get the height of each for (var i = 0; i < this.state.LeftList.length - 1; i++) {
      this.Height += this.state.LeftList[i].height;
      this.LeftHeight.push(this.Height);
    }
  }
  // Click on the left list to get the index FnTable(index) {
    // When clicking, set the scroll event on the right to false
    this.Swich = false;
    //Store index this.setState({
      curr: index,
    });
    //According to the subscript, take out the scrollTop value corresponding to the subscript in the array and let the scrollTop on the right be the value taken out from the array this.refs["leftItem"].scrollTop = this.LeftHeight[index];
  }
  FnScroll() {
    // Listen for scrolling this.scrollTop = this.refs["leftItem"].scrollTop;
 
    // Here we use a switch to determine whether to execute if (this.Swich) {
      //Store subscript let num = 0;
      // Loop through the array to retrieve the values ​​for (var i = 0; i < this.LeftHeight.length - 1; i++) {
        if (this.scrollTop >= this.LeftHeight[i]) {
          num = i;
        }
      }
      //Store index this.setState({
        curr: num,
      });
    }
    // Check if the scroll value is equal to the value in the array and the switch is true
    if (this.scrollTop == this.LeftHeight[this.state.curr]) {
      setTimeout(() => {
        this.Swich = true;
      });
    }
  }
 
  render() {
    return (
      <div className="box">
        <div className="scroll">
          <div className="list-left">
            {this.state.list.map((item, index) => (
              <div
                className="left-item"
                ref="scrollLeft"
                className={this.state.curr === index ? "active" : "left-item"}
                key={item.id}
                onClick={this.FnTable.bind(this, index)}
              >
                {item.title}
              </div>
            ))}
          </div>
          <div
            className="list-right"
            ref="leftItem"
            onScroll={this.FnScroll.bind(this)}
          >
            {this.state.LeftList.map((item) => (
              <div
                className="right-item"
                key={item.id}
                style={{ height: item.height }}
              >
                <div className="item-title">{item.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

 .box {
     width: 100vw;
     height: 100vh;
 
     .scroll {
         width: 100vw;
         height: 100vh;
         display: flex;
 
         .list-left {
             width: 200px;
             height: 100vh;
             background: rgb(151, 151, 151);
 
             .left-item {
                 height: 120px;
                 text-align: center;
                 line-height: 120px;
                 color: #ffffff;
                 font-size: 36px;
                 border: 3px solid #ffffff;
                 box-sizing: border-box;
             }
 
             .active {
                 height: 120px;
                 text-align: center;
                 line-height: 120px;
                 color: #ffffff;
                 font-size: 36px;
                 border: 3px solid #ffffff;
                 background-color: #f100d9;
                 box-sizing: border-box;
             }
         }
 
         .list-right {
             width: 100vw;
             height: 100vh;
             background-color: #15ff00;
             overflow: scroll;
 
             .right-item {
                 height: 400px;
                 border: 5px solid #0040ff;
                 font-size: 40px;
                 color: #ffffff;
                 box-sizing: border-box;
             }
         }
     }
 
 }