" 2. Gunakan push(), sintaksnya ialah "push("Jump address""; . Gunakan history(), sintaks "this.props.history.goBack();""/> " 2. Gunakan push(), sintaksnya ialah "push("Jump address""; . Gunakan history(), sintaks "this.props.history.goBack();"">

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk melaksanakan lompatan komponen halaman dalam bertindak balas

Bagaimana untuk melaksanakan lompatan komponen halaman dalam bertindak balas

青灯夜游
青灯夜游asal
2021-11-30 10:05:0211486semak imbas

Kaedah lompat: 1. Gunakan teg Pautan, sintaks ""; untuk melompat Alamat pemindahan ")"; 3. Gunakan history(), sintaks "this.props.history.goBack();"

Bagaimana untuk melaksanakan lompatan komponen halaman dalam bertindak balas

Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.

Beberapa kaedah lompat halaman (komponen) dalam React

1 Gunakan Pautan dalam react-router-dom untuk mencapai lompatan halaman

Umumnya terpakai. untuk melompat halaman dengan mengklik butang atau komponen lain Penggunaan khusus adalah seperti berikut:

<Link
    to={{
        pathname: &#39;/path/newpath&#39;,
        state: {  // 页面跳转要传递的数据,如下
              data1: {},
              data2: []
        },
    }}
>
   <Button>
        点击跳转
   </Button>
</Link>

2. Gunakan tekan dalam react-router-redux untuk melompat halaman

react-router-redux mengandungi fungsi berikut, yang biasanya digunakan bersama dengan redux:

    tolak - lompat ke laluan yang ditentukan
  • ganti - gantikan rekod sejarah kedudukan semasa dalam
  • go - gerakkan bilangan relatif kedudukan ke belakang atau ke hadapan dalam sejarah
  • goForward - gerakkan satu kedudukan ke hadapan. Bersamaan dengan go(1)
  • goBack - gerakkan satu kedudukan ke belakang. Setara dengan go(-1)
Apabila digunakan secara khusus, lompatan halaman dilakukan dengan menghantar penghantaran:

let param1 = {}
dispatch(push("/path/newpath'", param1));
dispatch(replace("/path/newpath'", param1));

3. Gunakan sejarah dalam RouteComponentProps untuk mengembalikan halaman Belakang

biasanya digunakan apabila menyelesaikan operasi tertentu dan perlu kembali ke halaman sebelumnya.

this.props.history.goBack();

4. Buka halaman tab baharu dan pintas laluan

Mula-mula tentukan laluan sebagai:

path: "/pathname/:param1/:param2/:param3",
Klik lompat acara Pergi ke halaman baharu dan buka tab baharu:

window.open(`pathname/${param1}/${param2}/${param3}`)
Dapatkan parameter pada laluan pada halaman baharu:

param1:  this.props.match.params.param1, 
param2:  this.props.match.params.param2, 
param3:  this.props.match.params.param3,
Dapatkan parameter laluan:

path?key1=value1&key2=value2
const query = this.props.match.location.search 
const arr = query.split('&')  // ['?key1=value1', '&key2=value2']
const successCount = arr[0].substr(6) // 'value1'
const failedCount = arr[1].substr(6) // 'value2'
atau

function GetUrlParam(url, paramName) {
  var arr = url.split("?");

  if (arr.length > 1) {
    var paramArr= arr[1].split("&");
    var arr;
    for (var i = 0; i < paramArr.length; i++) {
      arr = paramArr[i].split("=");

      if (arr != null && arr[0] == paramName) {
        return arr[1];
      }
    }
    return "";
  }else {
    return "";
  } 
}
Pembelajaran yang disyorkan: "

tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompatan komponen halaman dalam bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn