Reactの二次連携を実現する方法

Reactの二次連携を実現する方法

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

実施効果:普通のh5ページ。写真をトリミングし、ユーザー部分を削除しましたが、説明には影響しません。

一般的な考え方は、ページからコンポーネントにデータ インターフェイスを渡すことです。コンポーネントでインタラクションが実行されると、選択されたデータ結果が onTimeChange を通じてページに返され、ページに表示されます。
Taroで書きましたが、構文はreactと同じです。

ミニプログラム効果

かなり昔の方法ですが、実装コードを紹介します。

1. ページ上に時間を選択するためのポップアップウィンドウモジュールがあります

 {this.state.isToggleOn && (
    <パネル
        onTimeChange={this.onTimeChange}
        onClick={this.closeMask}
        list={this.state.timeList} //インターフェースデータ status={this.state.status} //現在の製品ステータス(オプション)/>
   )}

2. ポップアップウィンドウで

"@tarojs/taro" から { コンポーネント } をインポートします。
"@tarojs/components" から View、Text をインポートします。
SendTime を "../time" からインポートします。
「./index.scss」をインポートします。

デフォルトのクラス Panel をエクスポートし、Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
  }

  静的デフォルトプロパティ = {
    リスト: [],
    状態: ""
  };

  クリック() {
    this.properties を onClick() します。
  }

  onTimeChange(日付、時刻) {
    this.props.onTimeChange(日付、時刻);
  }

  与える() {
    戻る (
      <View className="panel-modal">
        <送信時間
          リスト={this.props.list}
          onClick={this.onClick}
          onTimeChange={this.onTimeChange}
          ステータス = {this.props.status}
        />
      </表示>
    );
  }
}

3. 時間要素

"@tarojs/taro" から { コンポーネント } をインポートします。
"@tarojs/components" から View、Text をインポートします。
「../../image」から imageList をインポートします。
「./index.scss」をインポートします。

dateNum = 0 とします。
  時間数 = 0;
エクスポートデフォルトクラス SendTime は Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);

    この状態 = {
      日付番号: 日付番号、
      時間番号: 時間番号、
      タイムリスト: [],
    };
  }

  静的デフォルトプロパティ = {
    リスト: [],
  };

  クリック() {
    this.properties を onClick() します。
  }

  switchDay(インデックス、情報) {
    this.setState({
      dateNum: インデックス、
    });
    dateNum = インデックス;
    this.switchTime(timeNum);
    date = info ? info.date : "" とします。
    time = info && info.timeSegementList ? info.timeSegementList[0] : "" とします。
    this.setState({
      タイムリスト: info.timeSegmentList、
    });
    this.onTimeChange(日付、時刻);
  }

  スイッチタイム(インデックス) {
    dateNum = this.state.dateNum; とします。
    this.setState({
      timeNum: インデックス、
    });
    timeNum = インデックス;
    date = this.props.list[dateNum] ? this.props.list[dateNum].date : ""; とします。
    time = this.props.list[dateNum]とします。
      ? this.props.list[日付番号].timeSegementList[インデックス]
      : "";
    (インデックス!= 0)の場合{
      this.onTimeChange(日付、時刻);
    }
  }

  onTimeChange(日付、時刻) {
    this.props.onTimeChange(日付、時刻);
  }

  コンポーネントマウント() {
    this.setState({
      timeList: ["グループが形成された直後に出荷"],
    });
  }

  コンポーネントマウント() {
    if (this.props.status) {
      this.switchDay(dateNum, this.props.list[dateNum]);
    } それ以外 {
      (日付番号 = 0)、(時刻番号 = 0);
      this.setState() は、
        {
          データ番号: 0,
          時間番号: 0,
        },
        () => {
          this.switchDay(0, this.props.list[0]);
        }
      );
    }
  }

  getClassName(インデックス) {
    スイッチ (インデックス) {
      ケース this.state.dateNum:
        「send-data-li current」を返します。
      デフォルト:
        「send-data-li」を返します。
    }
  }

  与える() {
    戻る (
      <表示>
        <View className="send-time-title" onClick={this.onClick}>
          <Text>配達時間</Text>
          <View className="close" />
        </表示>
        <View className="send-time-cont">
          <View className="送信日リスト">
            {this.props.list.map((情報、インデックス) => (
              <表示
                キー={インデックス}
                クラス名={
                  インデックス === this.state.dateNum
                    ? "送信データ-li 現在の"
                    : 「送信データli」
                }
                onClick={this.switchDay.bind(this, index, info)}
              >
                <Text className="txt">{info ? info.date : ""}</Text>
              </表示>
            ))}
          </表示>
          <View className="send-r-time">
            {this.state.timeList.map((情報、インデックス) => (
              <表示
                キー={インデックス}
                クラス名={
                  インデックス === this.state.timeNum
                    ?「send-r-li current」
                    : 「send-r-li」
                }
                onClick={this.switchTime.bind(this, インデックス)}
              >
                <View class="send-r-flex">
                  <Text class="txt">{情報}</Text>
                  <画像
                    className="blue-ok"
                    src={imageList.blueOk}
                    モード={"アスペクトフィット"}
                    遅延読み込み={true}
                  />
                </表示>
              </表示>
            ))}
          </表示>
        </表示>
      </表示>
    );
  }
}

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

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

<<:  MySQL監視ツールmysql-monitorの詳細な説明

>>:  Linux rpm および yum コマンドとその使用法の詳細な説明

推薦する

MySQL で結合を使用して SQL を最適化する方法の詳細な説明

0. 以下のテストに関連する表を準備する関連するテーブル作成ステートメントについては、https:/...

Nodejs 組み込み暗号化モジュールを使用してピアツーピアの暗号化と復号化を実現する詳細な説明

暗号化と復号化は、通信のセキュリティを確保するための重要な手段です。すでに多くの暗号化アルゴリズムが...

Ubuntu 16.04.5LTS に SVN をインストールする手順

この記事では、UbuntuシステムでSVNを設定するプロセスを簡単に紹介します。ソースを更新sudo...

MySQLの主キーと外部キーの使用と説明を簡単に説明します

目次1. 外部キー制約外部キーとは何ですか?外部キーを使用する条件:外部キーの定義構文は次のとおりで...

Nginx+Tomcat 負荷分散クラスタのインストールと構成のケースの詳細な説明

目次序文1. Nginx+Tomcat 2. Nginxサーバーを構成する3. Tomcatアプリケ...

コンピュータが予期せずシャットダウンした後、VMware で Linux がインターネットに接続できない問題の解決策

問題の説明: Linux システムのネットワーク カード ファイル /etc/sysconfig/n...

MySQL の current_timestamp の落とし穴とその解決策を共有する

目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...

Ubuntu システムでタイムゾーンと時刻を変更する方法

Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...

ApacheとTomcatを組み合わせて静的状態と動的状態を分離する方法

実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...

Centos7.4 環境に lamp-php7.0 をインストールするチュートリアル

この記事では、Centos7.4 環境に lamp-php7.0 をインストールする方法について説明...

HTML でよく使われるメタ百科事典 (推奨)

メタタグは、HTML言語のヘッド領域にある補助タグです。HTML文書のヘッダーにあるヘッドタグとタイ...

MacにMySQLデータベースをインストールする方法を教えます

Mac 用 MySQL をダウンロード: https://downloads.mysql.com/a...

JavaScriptオブジェクト指向について学ぼう

目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...

Vue3+Vantコンポーネントを使用してアプリの検索履歴機能を実装する(サンプルコード)

現在、新しいアプリプロジェクトを開発中です。私にとっても初めてのアプリ開発です。チームで調査と検討を...

MySQLのカバーインデックスに関する知識ポイントのまとめ

インデックスにクエリする必要があるすべてのフィールドの値が含まれている(またはカバーしている)場合、...