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 コマンドとその使用法の詳細な説明

推薦する

HTML メタタグの小さなコレクション

<Head>……</head> は <HTML> のファイル ヘ...

ショートカットアイコンとアイコンコードの違いの紹介

ステートメント 1: <link rel="shortcut icon" ...

jwtを使用してノードによって生成されたトークンをどこに保存するかについての簡単な説明

A: 通常はクライアントに保存されます。 jwt または JSON Web Token は、リクエス...

6つの珍しいHTMLタグ

まず: <abbr> または <acronym>これら 2 つの記号は同じ意...

WeChatアプレットが計算機機能を実装

WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...

効率を向上できる Linux コマンドエイリアス 10 個のまとめ

序文Linux 環境で作業するエンジニアは、これらの面倒な命令とパラメータのコマンドラインにきっと驚...

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

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

MySQL データベースのエンコーディングを utf8mb4 に変更する方法

utf8mb4 エンコーディングは utf8 エンコーディングのスーパーセットであり、utf8 と互...

Docker のコンテナ データ ボリュームの概要

目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...

jsの継承の6つの方法を詳しく解説

プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...

役に立つメタ設定方法(必読)

<meta name="viewport" content="...

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

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

メタ宣言注釈の手順

メタ宣言注釈の手順: 1. モバイル ページと 1 対 1 で対応するすべての PC ページを分類し...

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...