Reactは二次連結（左右連結）を実現する

'react' から { コンポーネント } をインポートします
'./linkage.less' をインポートします

クラス Linkage は Component を拡張します {
    コンストラクタ(...引数) {
        super(...引数)

        // 左側を追加します this.FnButtonList = []
        //右側を追加します this.FnContentList = []
        // this.ScrollBys = true に切り替える
        // コンストラクター内で直接実行 --> React は更新されたときにのみレンダリングされます --> componentDidMount は this.init() の取得をトリガーします

    }
    初期化() {
        this.FnSetButton(20)
        // 右側にレンダリング this.FnSetContent(20)
        この状態 = {
            ボタンリスト: this.FnButtonList、
            コンテンツリスト: this.FnContentList、
            //下付きボタンリストインデックス: 0,
        }


    }
    コンポーネントマウント() {
        this.EveryHeight = this.refs['linkage-button-list'].children[0].offsetHeight
    }
    // 乱数 FnSetRandom(m, n) {
        parseInt(Math.random() * (m - n) + n) を返します。
    }
    // 左側のボタンをレンダリングする FnSetButton(n) {
        (var i = 0; i < n; i++) の場合 {
            this.FnButtonList.push({
                id: `ボタン${i}`,
                テキスト: `ボタン${i}`
            })
        }
    }

    // 正しいコンテンツをレンダリングする FnSetContent(n) {
        let ContTop = 0; //最初の要素とページの上部の間の距離 let Random = this.FnSetRandom(750, 1400)
        (i = 0; i < n; i++ とします) {
            this.FnContentList.push({
                高さ: ランダム、
                id: `content${i}`,
                テキスト: `content${i}`,
                トップ: ContTop、
            });
            ContTop += ランダム;
        }
    }

    Fncurrn(インデックス) {
        （インデックス＞3）の場合{
            this.refs["linkage-button"].scrollTop = (index - 3) * this.EveryHeight;

        }
        （インデックス<= 3）の場合{
            this.refs["linkage-button"].scrollTop = 0;
        }
    }
    // クリック FnButtonTab(index) {
        this.ScrollBys = false
        this.setState({
            ボタンリストインデックス: インデックス
        })
        this.refs["linkage-content"].scrollTop = this.state.ContentList[index].top;

        //クリックして中央に配置 this.Fncurrn(index)
    }

    //右側と左側をスクロールする FnScroll(ev) {
        this.ContTop = ev.target.scrollTop
        if (this.ScrollBys) {
            n = 0とする

            (i = 0 とします; i < this.state.ContentList.length; i++) {
                もし （
                    this.refs["linkage-content"].scrollTop >= this.state.ContentList[i].top
                ）{
                    //ボックスのスクロール距離が右側のボックス内の要素とページの上部の間の距離よりも大きい場合、n = i;
                }
            }
            this.setState({
                ボタンリストインデックス: n
            })

            (Math.abs(n - this.state.ButtonListIndex) === 1)の場合{

                this.setState({
                    ボタンリストインデックス: n
                })
                //中央までスクロールします this.Fncurrn(n)

            }
        }


        this.ContTop == this.state.ContentList[this.state.ButtonListIndex].top) の場合 {
            this.ScrollBys = true
        }

    }

    与える（） {
        戻る （
            <div className="リンク">
                <div className="リンクボタン" ref="リンクボタン">
                    <div className="リンクボタンリスト" ref="リンクボタンリスト">
                        {this.state.ButtonList.map((item, index) => <div
                            キー={アイテムID}
                            className={this.state.ButtonListIndex == index ? 'linkage-button-item ac' : 'linkage-button-item'}
                            onClick={this.FnButtonTab.bind(this, インデックス)}
                        >
                            {アイテムテキスト}
                        </div>)}
                    </div>
                </div>
                <div className="link-content" ref="link-content" onScroll={this.FnScroll.bind(this)}>
                    <div className="リンクコンテンツリスト">
                        {this.state.ContentList.map((item) => <div
                            className="リンクコンテンツ項目"
                            キー={アイテムID}
                            スタイル={{ 高さ: item.height + 'px' }}
                        >
                            <div className="linkage-content-title"> {item.text}</div>
                        </div>)}
                    </div>
                </div>
            </div>
        ）
    }
}
デフォルトのリンクをエクスポート

体 {
    マージン: 0;
  }
  .linkage {
    幅：100vw;
    高さ：100vh;
    ディスプレイ: フレックス;
    .linkage-button {
      幅: 20vw;
      高さ：100vh;
      背景：チョコレート;
      テキスト配置: 中央;
      フォントサイズ: 40px;
      色: #fff;
      オーバーフロー: スクロール;
      スクロール動作: スムーズ;
      .linkage-button-list {
        幅: 20vw;
        .linkage-button-item.ac {
          背景: 水色;
        }
        .linkage-button-item {
          幅: 20vw;
          高さ: 10vh;
          行の高さ: 10vh;
        }
      }
    }
    .linkage-content {
      幅：80vw;
      高さ：100vh;
      スクロール動作: スムーズ;
      オーバーフロー: スクロール;
      .linkage-content-list {
        .linkage-content-item {
          幅：80vw;
          高さ：100vh;
          .linkage-content-title {
            高さ: 6vh;
            行の高さ: 6vh;
            幅：80vw;
            テキスト配置: 中央;
            背景:シャルトリューズ;
            色: #fff;
            フォントサイズ: 30px;
          }
        }
      }
    }
  }
  .linkage-button::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .linkage-content::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }