Bagaimanakah Saya Boleh Menghantar Props kepada Komponen Pengendali dalam Penghala Reaksi?

Melalukan Props kepada Komponen Pengendali dalam Penghala Reaksi

Dalam Penghala Reaksi, menghantar prop kepada komponen pengendali adalah keperluan biasa. Pertimbangkan struktur berikut:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

Melalui Props Secara Terus

Secara tradisinya, anda akan menghantar prop terus kepada komponen Komen seperti ini:

<Comments myprop="value" />

Melalui Props melalui React Router

Walau bagaimanapun, dalam React Router, prop mesti melalui prop komponen Route. Terdapat dua cara untuk melakukan ini:

1. Menggunakan Komponen Pembalut

Buat komponen pembalut yang melilit komponen pengendali:

var RoutedComments = React.createClass({
  render: function () {
    return <Comments {...this.props} myprop="value" />;
  }
});

Kemudian, gunakan komponen RoutedComments bukannya komponen Comments dalam laluan:

<Route path="comments" handler={RoutedComments}/>

2. Menggunakan Komponen Kelas dengan Sifat Laluan

Tentukan komponen kelas yang memanjang dari React.Component dan gunakan prop komponen:

class Index extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghantar Props kepada Komponen Pengendali dalam Penghala Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!