React realisiert sekundären Verknüpfungseffekt (Treppeneffekt)

importiere "../css/Leftrightlinkage.less";
importiere React, {Komponente} von „react“;
 
exportiere Standardklasse Leftrightlinkage erweitert Komponente {
  Konstruktor(...args) {
    super(...args);
    dieser.Zustand = {
      Liste: [
        { id: 1, title: "Liste 1" },
        { id: 2, title: "Liste 2" },
        { id: 3, title: "Liste 3" },
        { id: 4, title: "Liste 4" },
        { id: 5, title: "Liste 5" },
        { id: 6, title: "Liste 6" },
        { id: 7, title: "Liste 7" },
        { id: 8, title: "Liste 8" },
        { id: 9, title: "Liste 9" },
        { id: 10, title: "Liste 10" },
      ],
      Linke Liste: [
        { id: 1, title: "Liste 1", Höhe: 600 },
        { id: 2, title: "Liste 2", height: 600 },
        { id: 3, title: "Liste 3", Höhe: 600 },
        { id: 4, title: "Liste 4", height: 600 },
        { id: 5, title: "Liste 5", Höhe: 600 },
        { id: 6, title: "Liste 6", height: 600 },
        { id: 7, title: "Liste 7", height: 600 },
        { id: 8, title: "Liste 8", height: 600 },
        { id: 9, title: "Liste 9", height: 600 },
        { id: 10, title: "Liste 10", Höhe: 600 },
      ],
      curr: 0, //Index speichern};
 
    // Standardmäßig einen hinzufügen, da der erste ScrollTop-Wert 0 ist.
    diese.LeftHeight = [0];
    //Scroll-Schalter this.Swich = true;
  }
 
  // Das Rendern ist abgeschlossen und der Abstand zwischen jeder Liste und dem oberen Rand wird ermittelt componentDidMount() {
    // Als 0 definiert. Bei jeder Schleife ist die Summe die Entfernung von der Box zur Oberseite. this.Height = 0;
    // Schleife um die Höhe jedes Elements zu ermitteln for (var i = 0; i < this.state.LeftList.length - 1; i++) {
      diese.Höhe += dieser.Zustand.LeftList[i].Höhe;
      dies.LeftHeight.push(diese.Height);
    }
  }
  // Klicken Sie auf die linke Liste, um den Index zu erhalten FnTable(index) {
    // Beim Klicken das Scroll-Event rechts auf false setzen
    dies.Swich = falsch;
    //Index speichern this.setState({
      aktuell: Index,
    });
    //Nehmen Sie gemäß dem Index den ScrollTop-Wert heraus, der dem Index im Array entspricht, und lassen Sie das ScrollTop auf der rechten Seite der aus dem Array entnommene Wert sein this.refs["leftItem"].scrollTop = this.LeftHeight[index];
  }
  FnScroll() {
    // Auf Scrollen achten this.scrollTop = this.refs["leftItem"].scrollTop;
 
    // Hier verwenden wir einen Schalter, um zu bestimmen, ob ausgeführt werden soll, if (this.Swich) {
      //Index speichern let num = 0;
      // Durchlaufe das Array, um die Werte für (var i = 0; i < this.LeftHeight.length - 1; i++) { abzurufen.
        wenn (dieses.scrollTop >= dieses.LeftHeight[i]) {
          Zahl = i;
        }
      }
      //Index speichern this.setState({
        aktuell: Nummer,
      });
    }
    //Überprüfen Sie, ob der Scroll-Wert dem Wert im Array entspricht und der Schalter wahr ist
    wenn (dieses.scrollTop == dieses.LeftHeight[dieses.state.curr]) {
      setzeTimeout(() => {
        dies.Swich = wahr;
      });
    }
  }
 
  rendern() {
    zurückkehren (
      <div Klassenname="Box">
        <div Klassenname="scrollen">
          <div Klassenname="Liste-links">
            {this.state.list.map((item, index) => (
              <div
                Klassenname = "linkes Element"
                ref="nach links scrollen"
                Klassenname = {this.state.curr === Index? "aktiv" : "linkes Element"}
                Schlüssel={item.id}
                bei Klick={this.FnTable.bind(this, index)}
              >
                {item.title}
              </div>
            ))}
          </div>
          <div
            Klassenname = "Liste rechts"
            ref="linkesElement"
            beimScroll={dies.FnScroll.bind(dies)}
          >
            {this.state.LeftList.map((item) => (
              <div
                Klassenname = "Rechtes Element"
                Schlüssel={item.id}
                Stil={{ Höhe: Artikelhöhe }}
              >
                <div className="item-title">{item.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

 .Kasten {
     Breite: 100vw;
     Höhe: 100vh;
 
     .scroll {
         Breite: 100vw;
         Höhe: 100vh;
         Anzeige: Flex;
 
         .Liste-links {
             Breite: 200px;
             Höhe: 100vh;
             Hintergrund: rgb(151, 151, 151);
 
             .linkes-Element {
                 Höhe: 120px;
                 Textausrichtung: zentriert;
                 Zeilenhöhe: 120px;
                 Farbe: #ffffff;
                 Schriftgröße: 36px;
                 Rand: 3px durchgezogen #ffffff;
                 Box-Größe: Rahmenbox;
             }
 
             .aktiv {
                 Höhe: 120px;
                 Textausrichtung: zentriert;
                 Zeilenhöhe: 120px;
                 Farbe: #ffffff;
                 Schriftgröße: 36px;
                 Rand: 3px durchgezogen #ffffff;
                 Hintergrundfarbe: #f100d9;
                 Box-Größe: Rahmenbox;
             }
         }
 
         .Liste-rechts {
             Breite: 100vw;
             Höhe: 100vh;
             Hintergrundfarbe: #15ff00;
             Überlauf: scrollen;
 
             .richtiges-Element {
                 Höhe: 400px;
                 Rand: 5px durchgezogen #0040ff;
                 Schriftgröße: 40px;
                 Farbe: #ffffff;
                 Box-Größe: Rahmenbox;
             }
         }
     }
 
 }