Reactは二次的連鎖効果（階段効果）を実現する

"../css/Leftrightlinkage.less"をインポートします。
React をインポートします。{ コンポーネント } から "react" をインポートします。
 
エクスポートデフォルトクラスLeftrightlinkageはComponentを拡張します{
  コンストラクタ(...引数) {
    super(...引数);
    この状態 = {
      リスト: [
        { id: 1, タイトル: "リスト 1" },
        { id: 2, タイトル: "リスト 2" },
        { id: 3, タイトル: "リスト 3" },
        { id: 4, タイトル: "リスト 4" },
        { id: 5, タイトル: "リスト 5" },
        { id: 6, タイトル: "リスト 6" },
        { id: 7, タイトル: "リスト 7" },
        { id: 8, タイトル: "リスト 8" },
        { id: 9, タイトル: "リスト 9" },
        { id: 10, タイトル: "リスト 10" },
      ]、
      左リスト: [
        { id: 1、タイトル: "リスト 1"、高さ: 600 }、
        { id: 2、タイトル: "リスト 2"、高さ: 600 }、
        { id: 3、タイトル: "リスト 3"、高さ: 600 }、
        { id: 4、タイトル: "リスト 4"、高さ: 600 }、
        { id: 5、タイトル: "リスト 5"、高さ: 600 }、
        { id: 6、タイトル: "リスト 6"、高さ: 600 }、
        { id: 7、タイトル: "リスト 7"、高さ: 600 }、
        { id: 8、タイトル: "リスト 8"、高さ: 600 }、
        { id: 9、タイトル: "リスト 9"、高さ: 600 }、
        { id: 10、タイトル: "リスト 10"、高さ: 600 }、
      ]、
      curr: 0, // 添え字を格納};
 
    // 最初の scrollTop の値は 0 なので、デフォルトで 1 を追加します
    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({
      通貨: インデックス、
    });
    // 添字に従って、配列内の添字に対応する scrollTop 値を取り出し、右側の scrollTop を配列から取り出した値にします。this.refs["leftItem"].scrollTop = this.LeftHeight[index];
  }
  Fnスクロール() {
    // スクロールをリッスンします this.scrollTop = this.refs["leftItem"].scrollTop;
 
    // ここではスイッチを使用して実行するかどうかを決定します if (this.Swich) {
      // 添え字を格納 let num = 0;
      // 配列をループして値を取得します for (var i = 0; i < this.LeftHeight.length - 1; i++) {
        this.scrollTop >= this.LeftHeight[i] の場合 {
          数値 = i;
        }
      }
      //インデックスを保存する this.setState({
        通貨: 数値、
      });
    }
    // スクロール値が配列の値と等しく、スイッチが true であるかどうかを確認します
    this.scrollTop == this.LeftHeight[this.state.curr]の場合{
      タイムアウトを設定する(() => {
        this.Swich = true;
      });
    }
  }
 
  与える（） {
    戻る （
      <div クラス名="ボックス">
        <div className="スクロール">
          <div className="リスト左">
            {this.state.list.map((item, index) => (
              <div
                className="左項目"
                ref="左スクロール"
                className={this.state.curr === index ? "active" : "left-item"}
                キー={アイテムID}
                onClick={this.FnTable.bind(this, インデックス)}
              >
                {アイテムタイトル}
              </div>
            ))}
          </div>
          <div
            className="リスト右"
            ref="左項目"
            onScroll={this.FnScroll.bind(this)}
          >
            {this.state.LeftList.map((item) => (
              <div
                className="右項目"
                キー={アイテムID}
                スタイル={{ 高さ: アイテム.height }}
              >
                <div className="item-title">{item.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

 。箱 {
     幅：100vw;
     高さ：100vh;
 
     .スクロール{
         幅：100vw;
         高さ：100vh;
         ディスプレイ: フレックス;
 
         .list-left {
             幅: 200ピクセル;
             高さ：100vh;
             背景: rgb(151, 151, 151);
 
             .左項目{
                 高さ: 120px;
                 テキスト配置: 中央;
                 行の高さ: 120px;
                 色: #ffffff;
                 フォントサイズ: 36px;
                 境界線: 3px 実線 #ffffff;
                 ボックスのサイズ: 境界線ボックス;
             }
 
             。アクティブ {
                 高さ: 120px;
                 テキスト配置: 中央;
                 行の高さ: 120px;
                 色: #ffffff;
                 フォントサイズ: 36px;
                 境界線: 3px 実線 #ffffff;
                 背景色: #f100d9;
                 ボックスのサイズ: 境界線ボックス;
             }
         }
 
         .list-right {
             幅：100vw;
             高さ：100vh;
             背景色: #15ff00;
             オーバーフロー: スクロール;
 
             .right-item {
                 高さ: 400px;
                 境界線: 5px 実線 #0040ff;
                 フォントサイズ: 40px;
                 色: #ffffff;
                 ボックスのサイズ: 境界線ボックス;
             }
         }
     }
 
 }