React实现二级联动效果(楼梯效果)

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: "列表1" },        { id: 2, title: "列表2" },        { id: 3, title: "列表3" },        { id: 4, title: "列表4" },        { id: 5, title: "列表5" },        { id: 6, title: "列表6" },        { id: 7, title: "列表7" },        { id: 8, title: "列表8" },        { id: 9, title: "列表9" },        { id: 10, title: "列表10" },      ],      LeftList: [        { id: 1, title: "列表1", height: 600 },        { id: 2, title: "列表2", height: 600 },        { id: 3, title: "列表3", height: 600 },        { id: 4, title: "列表4", height: 600 },        { id: 5, title: "列表5", height: 600 },        { id: 6, title: "列表6", height: 600 },        { id: 7, title: "列表7", height: 600 },        { id: 8, title: "列表8", height: 600 },        { id: 9, title: "列表9", height: 600 },        { id: 10, title: "列表10", height: 600 },      ],      curr: 0, //存储下标    };     // 默认添加一个 因为第一个的scrollTop值是0    this.LeftHeight = [0];    // 滚动的开关    this.Swich = true;  }   // 渲染完成获取每一个列表距离顶部的距离  componentDidMount() {    // 定义为0 每次就可以循环加起来就是盒子距离顶部的距离    this.Height = 0;    // 循环获取每一个的高    for (var i = 0; i < this.state.LeftList.length - 1; i++) {      this.Height += this.state.LeftList[i].height;      this.LeftHeight.push(this.Height);    }  }  //   点击左侧列表 点击获取下标  FnTable(index) {    // 点击的时候让右边的滚动事件为false    this.Swich = false;    // 存储下标    this.setState({      curr: index,    });    // 根据下标取出数组中对应下标的scrollTop值  就让右边的scrollTop为数组中取出的值    this.refs["leftItem"].scrollTop = this.LeftHeight[index];  }  FnScroll() {    // 监听滚动    this.scrollTop = this.refs["leftItem"].scrollTop;     // 这边用开关判断是否执行    if (this.Swich) {      // 存放下标      let num = 0;      // 循环取出数组中的数值      for (var i = 0; i < this.LeftHeight.length - 1; i++) {        if (this.scrollTop >= this.LeftHeight[i]) {          num = i;        }      }      // 存储下标      this.setState({        curr: num,      });    }    // 判断滚动的值和数组中的值相等 开关为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;             }         }     }  }