Comment transmettre des accessoires au composant Handler dans React Router ?-js tutoriel-php.cn

Comment transmettre des accessoires au composant Handler dans React Router ?

Mary-Kate Olsen

Libérer： 2024-10-24 03:11:02

original

439 Les gens l'ont consulté

How to Pass Props to Handler Component in React Router?

Passer des accessoires au composant Handler dans React Router

Dans les applications React.js qui utilisent React Router, il peut y avoir des cas où la transmission de propriétés spécifiques aux composants enfants est nécessaire. Par exemple, considérons la structure 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>

Copier après la connexion

L'objectif est de transmettre des propriétés dans le composant Commentaires. Normalement, cela pourrait être réalisé directement dans la déclaration du composant. Cependant, avec React Router, une approche alternative est nécessaire.

Une option consiste à utiliser un composant wrapper. Cela impliquerait de créer un composant distinct qui enveloppe le composant Commentaires et transmet les accessoires souhaités. Voici un exemple :

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

Copier après la connexion

Une autre approche, sans utiliser de composants wrapper, consiste à modifier le composant Index :

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

Copier après la connexion

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!