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 を応援していただければ幸いです。

以下もご興味があるかもしれません: