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

Extension des composants du routeur avec des accessoires personnalisés dans React Router v4

Lors de la construction d'applications React multipages à l'aide de React Router, il est souvent souhaitable de transmettre des accessoires personnalisés aux composants enfants. Par défaut, les composants enfants héritent de l'objet this.props.route, mais celui-ci ne contient pas toujours les accessoires prévus.

Problème : this.props.route non défini pour les composants enfants

Le problème peut être observé lors de l'accès à this.props.route dans les composants enfants, qui renvoie undéfini. En effet, la méthode de rendu par défaut de React Router ne prend pas en charge la transmission d'accessoires personnalisés.

Solution : Utilisation de l'accessoire de rendu

Pour transmettre des accessoires personnalisés, exploitez l'accessoire de rendu du composant Route. Cela implique d'intégrer la définition du composant dans le prop de rendu :

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

Accès aux accessoires personnalisés dans les composants enfants

Dans le composant enfant, accédez aux accessoires personnalisés via this.props :

<code class="javascript">console.log(this.props.test); // Outputs "hi"</code>

Propagation des accessoires de routeur par défaut

Lors de l'utilisation de l'accessoire de rendu, il est crucial de propager les accessoires de routeur par défaut (emplacement, historique, correspondance, etc.) au composant enfant. Ceci est réalisé en incluant {...props} dans la prop de rendu :

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

Conclusion

En utilisant la prop de rendu, vous pouvez facilement transmettre des accessoires personnalisés aux composants du routeur dans React Router v4. N'oubliez pas de propager les accessoires de routeur par défaut pour garantir la fonctionnalité des composants enfants.

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!