Comment transmettre des accessoires aux composants gérés dans React Router ?

Passer des accessoires aux composants gérés dans React Router

Dans une application React.js utilisant React Router, il est courant de rencontrer le besoin de transmettre des accessoires aux composants gérés. Pour y parvenir, il existe quelques approches à considérer :

Une approche simple consiste à envelopper le composant géré avec un nouveau composant qui prend les accessoires souhaités et les transmet selon les besoins :

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

De cette façon, vous pouvez utiliser CommentsWrapper comme gestionnaire pour l'itinéraire souhaité :

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

Cependant, cette approche peut devenir lourde si vous devez transmettre des accessoires à plusieurs composants gérés. Dans de tels cas, une approche plus flexible consiste à utiliser la propriété composant dans la configuration de la route, ce qui vous permet de transmettre directement les accessoires au composant géré :

<code class="javascript">var routes = (
  <Route path="/" component={Index}/>
);

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

Avec cette approche, vous pouvez transmettre les accessoires directement au composant géré. le composant Commentaires sans avoir besoin d'un wrapper :

<code class="javascript"><Route path="comments" component={Comments}/></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!