Bagaimana untuk Menghantar Props kepada Komponen Pengendali dalam Penghala Reaksi?

Melalukan Props kepada Komponen Pengendali Menggunakan Penghala React

Dalam aplikasi React.js yang memanfaatkan Penghala React, anda mungkin menghadapi senario di mana anda perlu menghantar prop kepada komponen pengendali tertentu . Pertimbangkan struktur aplikasi 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>

Untuk menghantar prop kepada komponen Ulasan, anda biasanya menggunakan sintaks seperti . Walau bagaimanapun, pendekatan ini tidak serasi dengan React Router, yang menjangkakan komponen pengendali adalah fungsi tulen atau komponen kelas.

Salah satu penyelesaian ialah mencipta komponen pembalut yang merangkum kedua-dua komponen pengendali dan prop yang diluluskan:

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

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

Sebagai alternatif, anda boleh memanfaatkan komponen kelas dan objek this.props.route untuk mengakses prop yang dihantar ke laluan induk:

<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>

Dengan menetapkan foo prop pada laluan / , anda boleh mengakses prop kemudian dalam komponen Indeks menggunakan this.props.route.

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!