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

Passer des accessoires aux composants du gestionnaire dans React Router

Dans React Router, passer des accessoires aux composants du gestionnaire est une exigence courante. Considérez la structure suivante :

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);
});

Transmission directe des accessoires

Traditionnellement, vous transmettriez les accessoires directement au composant Commentaires comme ceci :

<Comments myprop="value" />

Passer des accessoires via React Router

Cependant, dans React Router, les accessoires doivent être transmis via le composant prop de la Route. Il existe deux façons de procéder :

1. Utilisation d'un composant Wrapper

Créez un composant wrapper qui s'enroule autour du composant gestionnaire :

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

Ensuite, utilisez le composant RoutedComments au lieu du composant Comments dans la route :

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

2. Utilisation de composants de classe avec des propriétés de route

Définissez un composant de classe qui s'étend de React.Component et utilisez le prop du composant :

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}/>
);

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!