Maison  >  Article  >  interface Web  >  Comment transmettre des accessoires personnalisés aux composants enfants dans React Router v4 ?

Comment transmettre des accessoires personnalisés aux composants enfants dans React Router v4 ?

Linda Hamilton
Linda Hamiltonoriginal
2024-10-30 14:40:28681parcourir

How to Pass Custom Props to Child Components in React Router v4?

Comment transmettre des accessoires personnalisés aux composants enfants dans React Router v4

Problème :

Dans React Router v4, tenter pour accéder aux accessoires de route via this.props.route renvoie undefined. Les composants enfants ne peuvent pas recevoir les accessoires personnalisés transmis par les composants parents.

Exemple de code :

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact test="hi" component={Home} />
          <Route path="/progress" test="hi" component={Progress} />
          <Route path="/test" test="hi" component={Test} />
        </Switch>
      </div>
    </Router>
  );
}

// Child Component
render() {
  console.log(this.props); // Returns {match: {...}, location: {...}, history: {...}, staticContext: undefined}
}</code>

Solution :

Pour transmettre des accessoires personnalisés aux composants enfants, utilisez un accessoire de rendu pour définir le composant en ligne avec l'itinéraire :

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact render={(props) => <Home test="hi" {...props} />} />
          <Route path="/progress" render={(props) => <Progress test="hi" {...props} />} />
          <Route path="/test" render={(props) => <Test test="hi" {...props} />} />
        </Switch>
      </div>
    </Router>
  );
}</code>

Dans le composant enfant, accédez à l'accessoire personnalisé comme suit :

<code class="javascript">render() {
  console.log(this.props.test); // Returns "hi"
}</code>

Remarque : Assurez-vous que {...props} est transmis au composant enfant pour préserver l'accès aux accessoires de routeur par défaut (par exemple, correspondance, emplacement, historique).

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn