React如何实现二级联动效果

这篇文章将为大家详细讲解有关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 (      
        
          
            {this.state.list.map((item, index) => (              
                {item.title}              
            ))}          
          
            {this.state.LeftList.map((item) => (              
                
{item.title}
              
            ))}          
        
      
    );  }}

CSS样式，文件格式是Less格式

 .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;             }         }     }  }

效果图：

关于"React如何实现二级联动效果"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。