Comment transmettre des accessoires aux composants du gestionnaire dans React Router ?

Passer des accessoires aux composants du gestionnaire à l'aide de React Router

Dans les applications React.js qui exploitent React Router, vous pouvez rencontrer des scénarios dans lesquels vous devez transmettre des accessoires à des composants de gestionnaire spécifiques . Considérez la structure d'application suivante :

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

Pour transmettre des accessoires au composant Commentaires, vous utilisez généralement une syntaxe telle que . Cependant, cette approche est incompatible avec React Router, qui s'attend à ce que les composants du gestionnaire soient de pures fonctions ou des composants de classe.

Une solution consiste à créer un composant wrapper qui encapsule à la fois le composant du gestionnaire et les accessoires transmis :

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

Vous pouvez également exploiter les composants de classe et l'objet this.props.route pour accéder aux accessoires transmis à la route parent :

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

En définissant le prop foo sur la route / , vous pourrez accéder à l'accessoire ultérieurement dans le composant Index en utilisant this.props.route.

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!