React realisiert sekundäre Verknüpfung (linke und rechte Verknüpfung)

importiere { Komponente } von 'react'
importiere './linkage.less'

Klasse Linkage erweitert Komponente {
    Konstruktor(...args) {
        super(...args)

        // Linke Seite hinzufügen this.FnButtonList = []
        //Rechte Seite hinzufügen this.FnContentList = []
        //Schalter this.ScrollBys = true
        // Direkt im Konstruktor ausführen --> React wird nur gerendert, wenn es aktualisiert wird --> componentDidMount löst den Erwerb von this.init() aus

    }
    init() {
        dies.FnSetButton(20)
        // Rendern rechts this.FnSetContent(20)
        dieser.Zustand = {
            ButtonList: diese.FnButtonList,
            Inhaltsliste: this.FnContentList,
            //Index ButtonListIndex: 0,
        }


    }
    componentDidMount() {
        dies.JedeHeight = dies.refs['linkage-button-list'].children[0].offsetHeight
    }
    // Zufallszahl FnSetRandom(m, n) {
        gibt parseInt zurück (Math.random() * (m - n) + n);
    }
    // Rendere den Button auf der linken Seite FnSetButton(n) {
        für (var i = 0; i < n; i++) {
            dies.FnButtonList.push({
                ID: `button${i}`,
                Text: `Button${i}`
            })
        }
    }

    // Den richtigen Inhalt rendern FnSetContent(n) {
        let ContTop = 0; //Der Abstand zwischen dem ersten Element und dem oberen Rand der Seite let Random = this.FnSetRandom(750, 1400)
        für (sei i = 0; i < n; i++) {
            dies.FnContentList.push({
                Höhe: Zufällig,
                ID: `content${i}`,
                Text: `content${i}`,
                oben: ContTop,
            });
            ContTop += Zufällig;
        }
    }

    Fncurrn(index) {
        wenn (Index > 3) {
            this.refs["Linkage-Button"].scrollTop = (Index - 3) * this.EveryHeight;

        }
        wenn (Index <= 3) {
            this.refs["Verknüpfungsschaltfläche"].scrollTop = 0;
        }
    }
    // Klicken Sie auf FnButtonTab(index) {
        this.ScrollBys = falsch
        dies.setState({
            ButtonListIndex: Index
        })
        diese.refs["linkage-content"].scrollTop = diese.state.ContentList[index].top;

        //Klicken, um dies zu zentrieren.Fncurrn(index)
    }

    //Nach rechts und nach links scrollen FnScroll(ev) {
        dies.ContTop = ev.target.scrollTop
        wenn (dieses.ScrollBys) {
            sei n = 0

            für (lass i = 0; i < this.state.ContentList.length; i++) {
                Wenn (
                    this.refs["linkage-content"].scrollTop >= this.state.ContentList[i].top
                ) {
                    //Wenn die Scroll-Distanz der Box größer ist als die Distanz zwischen dem Element in der rechten Box und dem oberen Seitenrand n = i;
                }
            }
            dies.setState({
                ButtonListIndex: n
            })

            wenn (Math.abs(n - dieser.Zustand.ButtonListIndex) === 1) {

                dies.setState({
                    ButtonListIndex: n
                })
                //Zur Mitte scrollen this.Fncurrn(n)

            }
        }


        wenn (dieser.ContTop == dieser.Zustand.ContentList[dieser.Zustand.ButtonListIndex].top) {
            this.ScrollBys = wahr
        }

    }

    rendern() {
        zurückkehren (
            <div Klassenname = "Verknüpfung">
                <div Klassenname = "Verknüpfungsschaltfläche" ref = "Verknüpfungsschaltfläche">
                    <div Klassenname = "Verknüpfungsschaltflächenliste" ref = "Verknüpfungsschaltflächenliste">
                        {this.state.ButtonList.map((item, index) => <div
                            Schlüssel={item.id}
                            Klassenname = {this.state.ButtonListIndex == Index? 'Verknüpfungsschaltflächenelement ac': 'Verknüpfungsschaltflächenelement'}
                            beim Klicken = {diese.FnButtonTab.bind(diese, index)}
                        >
                            {item.text}
                        </div>)}
                    </div>
                </div>
                <div className="Verknüpfungsinhalt" ref="Verknüpfungsinhalt" onScroll={this.FnScroll.bind(this)}>
                    <div Klassenname = "Link-Inhaltsliste" >
                        {this.state.ContentList.map((item) => <div
                            Klassenname = "Link-Inhaltselement"
                            Schlüssel={item.id}
                            Stil={{ Höhe: Artikelhöhe + 'px' }}
                        >
                            <div className="linkage-content-title"> {item.text}</div>
                        </div>)}
                    </div>
                </div>
            </div>
        )
    }
}
Standardverknüpfung exportieren

Körper {
    Rand: 0;
  }
  .Verknüpfung {
    Breite: 100vw;
    Höhe: 100vh;
    Anzeige: Flex;
    .Verknüpfungsschaltfläche {
      Breite: 20vw;
      Höhe: 100vh;
      Hintergrund: Schokolade;
      Textausrichtung: zentriert;
      Schriftgröße: 40px;
      Farbe: #fff;
      Überlauf: scrollen;
      Scroll-Verhalten: glatt;
      .linkage-button-list {
        Breite: 20vw;
        .linkage-button-item.ac {
          Hintergrund: hellblau;
        }
        .linkage-button-item {
          Breite: 20vw;
          Höhe: 10vh;
          Zeilenhöhe: 10vh;
        }
      }
    }
    .linkage-content {
      Breite: 80vw;
      Höhe: 100vh;
      Scroll-Verhalten: glatt;
      Überlauf: scrollen;
      .linkage-content-list {
        .linkage-content-item {
          Breite: 80vw;
          Höhe: 100vh;
          .linkage-content-title {
            Höhe: 6vh;
            Zeilenhöhe: 6vh;
            Breite: 80vw;
            Textausrichtung: zentriert;
            Hintergrund: Chartreuse;
            Farbe: #fff;
            Schriftgröße: 30px;
          }
        }
      }
    }
  }
  .linkage-button::-webkit-scrollbar {
    Anzeige: keine; /* Chrome Safari */
  }
  .linkage-content::-webkit-scrollbar {
    Anzeige: keine; /* Chrome Safari */
  }