Bagaimana untuk Menghantar Props Tersuai kepada Komponen Kanak-kanak dalam Penghala Reaksi v4?

Cara Menghantar Props Tersuai kepada Komponen Anak dalam React Router v4

Masalah:

Dalam React Router v4, cuba untuk mengakses props laluan melalui this.props.route returns undefined. Komponen kanak-kanak tidak dapat menerima prop tersuai yang dihantar daripada komponen induk.

Contoh Kod:

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact test="hi" component={Home} />
          <Route path="/progress" test="hi" component={Progress} />
          <Route path="/test" test="hi" component={Test} />
        </Switch>
      </div>
    </Router>
  );
}

// Child Component
render() {
  console.log(this.props); // Returns {match: {...}, location: {...}, history: {...}, staticContext: undefined}
}</code>

Penyelesaian:

Untuk menghantar prop tersuai kepada komponen anak, gunakan prop render untuk menentukan komponen sebaris dengan laluan:

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact render={(props) => <Home test="hi" {...props} />} />
          <Route path="/progress" render={(props) => <Progress test="hi" {...props} />} />
          <Route path="/test" render={(props) => <Test test="hi" {...props} />} />
        </Switch>
      </div>
    </Router>
  );
}</code>

Dalam komponen anak, akses prop tersuai seperti berikut:

<code class="javascript">render() {
  console.log(this.props.test); // Returns "hi"
}</code>

Nota: Pastikan {...props} diserahkan kepada komponen anak untuk mengekalkan akses kepada prop penghala lalai (cth., padanan, lokasi, sejarah).

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Props Tersuai kepada Komponen Kanak-kanak dalam Penghala Reaksi v4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!