Reactは二次連結(左右連結)を実現する

Reactは二次連結(左右連結)を実現する

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

jsコード

'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>
        )
    }
}
デフォルトのリンクをエクスポート

cssファイル

体 {
    マージン: 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 */
  }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Reactの二次連携を実現する方法
  • Reactは二次的連鎖効果(階段効果)を実現する
  • React+tsは二次リンク効果を実現します

<<:  Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)

>>:  Dockerコンテナにnginxを簡単にデプロイするプロセスの分析

推薦する

Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策

1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...

Vue+echarts でプログレスバーのヒストグラムを実現

この記事では、プログレスバーヒストグラムを実現するためのvue+echartsの具体的なコードを参考...

JavaScript は自由に移動するウィンドウのマウス制御を実装します

この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考...

JavaScript で二分探索木を実装する

JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...

Linux のよく使うコマンドの使い方を詳しく解説(第 2 回)———— テキストエディタのコマンド vi/vim

vi/vim の紹介どちらもマルチモード エディターです。違いは、vim が vi のアップグレー...

mysql 8.0.18 mgr のインストールと切り替え機能

1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...

FileZilla Server の FTP サーバー構成と 425 エラーおよび TLS 警告の解決策の詳細な説明

123WORDPRESS.COM では、FileZilla のダウンロード リンクを提供しています:...

MySQLのパフォーマンスが突然低下する理由

場合によっては、SQL ステートメントが通常どおり、非常に速く実行される状況に遭遇することがあります...

hasLayout によって発生する CSS バグの一覧

IE には長い間問題がありました。誰もがテストを受けたとき、誰もが笑顔でしたが、それはただのニヤニヤ...

Vue2.xは、ユーザーのログインと終了を実装するためにルーティングナビゲーションガードを設定します。

目次序文1. ルーティングナビゲーションガードを設定する1. グローバルナビゲーションガード2. ロ...

XHTML ドキュメントで JavaScript と CSS を正しく使用する方法

ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しか...

忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します

MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...

Javascript を使用して、スライドバー効果のあるスライドナビゲーション プラグインを開発します。

目次1. はじめに2. 使用方法3. 開発プロセス1. モデル例2. イベントとアニメーション4. ...

MySQL 5.7 でデータベースのデータ保存場所を変更する方法

MySQL データベースに保存されるデータが徐々に増加すると、元のストレージ領域がいっぱいになり、M...