本文例項為大家分享了React實現二級聯動的具體程式碼，供大家參考，具體內容如下

程式碼

import { Component } from 'react'
import './linkage.less'

class Linkage extends Component {
    constructor(...args) {
        super(...args)

        // 新增左側
        this.FnButtonList = []
        //新增右側
        this.FnContentList = []
        // 開關
        this.ScrollBys = true
        // 在constructor中直接執行——>react更新時才會渲染——>componentDidMount時才能觸發獲取
        this.init()

    }
    init() {
        this.FnSetButton(20)
        // 右側的渲染
        this.FnSetContent(20)
        this.state = {
            ButtonList: this.FnButtonList,ContentList: this.FnContentList,// 下標
            ButtonListIndex: 0,}


    }
    componentDidMount() {
        this.EveryHeight = this.refs['linkage-button-list'].children[0].offsetHeight
    }
    // 隨機數
    FnSetRandom(m,n) {
        return parseInt(Math.random() * (
 
m - n) + n);
    }
    // 渲染左側的按鈕
    FnSetButton(n) {
        for (var i = 0; i < n; i++) {
            this.FnButtonList.push({
                id: `按鈕${i}`,text: `按鈕${i}`
            })
        }
    }

    // 渲染右側內容
    FnSetContent(n) {
        let ContTop = 0;//第一個元素距離頁面頂部的距離
        let Random = this.FnSetRandom(750,1400)
        for (let i = 0; i < n; i++) {
            this.FnContentList.push({
                height: Random,id: `內容${i}`,text: `內容${i}`,top: ContTop,});
            ContTop += Random;
        }
    }

    Fncurrn(index) {
        if (index > 3) {
            this.refs["linkage-button"].scrollTop = (index - 3) * this.EveryHeight;

        }
        if (index <= 3) {
            this.refs["linkage-button"].scrollTop = 0;
        }
    }
    // 點選
    FnButtonTab(index) {
        this.ScrollBys = false
        this.setState({
            ButtonListIndex: index
        })
        this.refs["linkage-content"].scrollTop = this.state.ContentList[index].top;

        //點選居中
        this.Fncurrn(index)
    }

    //右邊滾動左邊
    FnScroll(ev) {
        this.ContTop = ev.target.scrollTop
        if (this.ScrollBys) {
            let n = 0

            for (let i = 0; i < this.state.ContentList.length; i++) {
                if (
                    this.refs["linkage-content"].scrollTop >= this.state.ContentList[i].top
                ) {
                    //盒子滾動的距離如果大於右邊盒子裡的元素距離頁面頂部的距離
                    n = i;
                }
            }
            this.setState({
                ButtonListIndex: n
            })

            if (Math.abs(n - this.state.ButtonListIndex) === 1) {

                this.setState({
                    ButtonListIndex: n
                })
                //滾動居中

                this.Fncurrn(n)

            }
        }


        if (this.ContTop == this.state.ContentList[this.state.ButtonListIndex].top) {
            this.ScrollBys = true
        }

    }

    render() {
        return (
            <div className="linkage">
                <div className="linkage-button" ref="linkage-button">
                    <div className="linkage-button-list" ref="linkage-button-list">
                        {this.state.ButtonList.map((item,index) => <div
                            key={item.id}
                            className={this.state.ButtonListIndex == index ? 'linkage-button-item ac' : 'linkage-button-item'}
                            onClick={this.FnB
 
uttonTab.bind(this,index)}
                        >
                            {item.http://www.cppcns.comtext}
                        </div>)}
                    </div>
                </div>
                <div className="linkage-content" ref="linkage-content" onScroll={this.FnScroll.bind(this)}>
                    <div className="linkage-content-list">
                        {this.state.ContentList.map((item) => <div
                            className="linkage-content-item"
                            key={item.id}
                            style={{ height: item.height + 'px' }}
                        >
                            <div className="linkage-content-title"> {item.text}</div>
                        </div>)}
           客棧
 
         </div >
                </div >
            </div >
        )
    }
}
export default Linkage

檔案

body {
    margin: 0;
  }
  .linkage {
    width: 100vw;
    height: 100vh;
    display: flex;
    .linkage-button {
      width: 20vw;
      height: 100vh;
      background: chocolate;
      text-align: center;
      font-size: 40px;
      color: #fff;
      overflow: scroll;
      scroll-behavior: smooth;
      .linkage-button-list {
        width: 20vw;
        .linkage-button-item.ac {
          background: lightblue;
        }
        .linkage-button-item {
          width: 20vw;
          height: 10vh;
          line-height: 10vh;
        }
      }
    }
    .linkage-content {
      width: 80vw;
      height: 100vh;
      scroll-behavior: smooth;
      overflow: scroll;
      .linkage-content-list {
        .linkage-content-item {
          width: 80vw;
          height: 100vh;
          .liwww.cppcns.comnkage-content-title {
            height: 6vh;
            line-height: 6vh;
            width: 80vw;
            text-align: center;
            background: chartreuse;
            color: #fff;
            font-size: 30px;
          }
        }
      }
    }
  }
  .linkage-button::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .linkage-content::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。