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

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

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

Ele.me を模倣して二次リンク効果を実現します。

"../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>
    );
  }
}

CSSスタイル、ファイル形式はLess形式

 。箱 {
     幅: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;
                 ボックスのサイズ: 境界線ボックス;
             }
         }
     }
 
 }

効果画像:

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

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

<<:  Linux ダイナミックライブラリの生成と使用ガイドの詳細な説明

>>:  Dockerアーキテクチャ入門

推薦する

MySql 共通クエリコマンド操作リスト

MYSQL でよく使用されるクエリ コマンド: mysql> select version()...

HTMLはシンプルで美しいログインページを作成します

まずは見てみましょう。 HTML ソースコード: XML/HTML コードコンテンツをクリップボード...

Nginx での SSL 証明書のインストールと展開手順の概要

目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...

Vue.$set の失敗の落とし穴の発見と解決

偶然、プロジェクト内でVue.$setが無効であることがわかりましたデータ フィルタリングを追加する...

Linux でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法

同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...

Linux システムでの virtuoso データベースの詳細なインストールと使用

最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...

MySQL Truncate の使用方法の詳細な説明

目次MySQL 切り捨ての使用1. 構文を切り捨てる2. Truncateの使用上の注意3. TRU...

MySQLでよく使われる文字列関数トップ10の詳細な説明

こんにちは、みんな!技術の話ばかりで髪は切らないトニーです。データベース関数は、何らかの機能を持ち、...

実際のプロジェクトでElementUIを使用する手順の詳細な説明

目次1. テーブル自動ソート2. ページング機能3.el-checkbox-group 複数選択ボッ...

構造とプレゼンテーションの分離を理解するためのWeb標準の学習

Web 標準について議論するときに必ず話題になるのは、構造とプレゼンテーションを分離することの重要性...

VMware で VMware ツールをインストールしてもインストール ファイルが表示されない問題を解決する方法

VMware ツールは VMware の使用に非常に便利です。そのため、VMware ツールをインス...

Zen Coding 簡単で素早いHTMLの書き方

禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...

Vueがsweetalert2プロンプトコンポーネントを統合する際の問題についてお話ししましょう

目次1. プロジェクト統合1. CDNインポート方法: 2. 箱の梱包を確認する3. 迅速な箱詰め4...

nginx + fastcgi を使用して画像認識サーバーを実装する

背景ディープラーニング モデルの推論には、特定のデバイスが使用されます。マシンは、モデルの読み込み、...

WeChatミニプログラム抽選コンポーネントの使い方

WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...