Bagaimana untuk Menghantar Props kepada Komponen Pengendali dalam Penghala Reaksi?

Melalukan Props kepada Komponen Pengendali dalam React Router

Dalam aplikasi React.js yang menggunakan React Router, mungkin terdapat keadaan yang melepasi sifat tertentu kepada komponen kanak-kanak adalah perlu. Sebagai contoh, pertimbangkan struktur berikut:

<code class="javascript">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);
});</code>

Matlamatnya adalah untuk menghantar sifat ke dalam komponen Ulasan. Biasanya, ini boleh dicapai secara langsung dalam pengisytiharan komponen. Walau bagaimanapun, dengan React Router, pendekatan alternatif diperlukan.

Satu pilihan ialah menggunakan komponen pembalut. Ini akan melibatkan mencipta komponen berasingan yang membalut komponen Komen dan melepasi prop yang dikehendaki. Berikut ialah contoh:

<code class="javascript">var CommentsWithProps = React.createClass({
  render: function () {
    return (
      <Comments myprop={this.props.myprop} />
    );
  }
});

// Then in the routes definition:

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

Pendekatan lain, tanpa menggunakan komponen pembalut, ialah mengubah suai komponen Indeks:

<code class="javascript">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}/>
);</code>

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