React: Les accessoires requis fournis avec cloneElement affichent toujours un avertissement dans la console
J'ai fait un exemple pour qu'il soit plus facile à comprendre, mais en gros, un avertissement s'affiche dans la console à cause des "accessoires requis manquants".
Les accessoires sont donnés à l'élément avec React.cloneElement donc je ne m'attendais pas à recevoir un avertissement d'accessoires manquants. Je comprends que cela puisse être un cas limite cependant...
https://jsfiddle.net/kdsvgbzu/1/
<A name="name" value="value">
<B></B>
</A>
class A extends React.Component {
render() {
return (
<div>
{React.Children.map(this.props.children, function(child) {
return React.cloneElement(child, {
name: this.props.name,
value: this.props.value
});
}, this)}
</div>
);
}
}
A.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired
};
class B extends React.Component {
render() {
return <span>{this.props.name} : {this.props.value}</span>;
}
}
B.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired
};
tleunen
Tous les 3 commentaires
C'est intentionnel ; la validation des accessoires au moment de la création de l'élément produit des erreurs plus utiles. Il correspond également plus étroitement au comportement des systèmes de type statique comme Flow. Le mieux pour l'instant est de simplement marquer ces accessoires comme facultatifs. Nous pourrions également introduire une fonctionnalité appelée contexte dans le futur qui donnera un autre moyen pris en charge de transmettre des accessoires d'un parent comme A à un enfant comme B.
sophiebits
le 27 juil. 2015
C'est ce que je pensais. Merci @spicyj
tleunen
le 27 juil. 2015
Je ne sais pas quel était votre cas d'utilisation réel @tleunen , mais je suis tombé sur ce problème lors de l'implémentation d'un composant réutilisable qui avait la responsabilité de transmettre des accessoires à ses enfants :
ReactDOM.render(
<NumberSelector>
<ComponentRequiringTheNumber />
</NumberSelector>
)
En fin de compte, j'ai contourné le problème avec ce que j'ai trouvé est une solution plus élégante :
ReactDOM.render(
<NumberSelector>
{({number}) => <ComponentRequiringTheNumber number={number} />}
</NumberSelector>
)
Je l'aime beaucoup mieux car la dépendance de ComponentRequiringTheNumber est explicite, et le rôle de NumberSelector devient évident. Et de cette façon, les accessoires donnés au composant imbriqué ne sont évalués que lorsque cela est pertinent.
Appliqué à votre violon : https://jsfiddle.net/ap1e9rk3/1/
micaste
le 1 mars 2017
Questions connexes
jmullo
·
3Commentaires
zpao
·
3Commentaires
huxiaoqi567
·
3Commentaires
kocokolo
·
3Commentaires
zpao
·
3Commentaires
Commentaire le plus utile
Je ne sais pas quel était votre cas d'utilisation réel @tleunen , mais je suis tombé sur ce problème lors de l'implémentation d'un composant réutilisable qui avait la responsabilité de transmettre des accessoires à ses enfants :
En fin de compte, j'ai contourné le problème avec ce que j'ai trouvé est une solution plus élégante :
Je l'aime beaucoup mieux car la dépendance de
ComponentRequiringTheNumberest explicite, et le rôle deNumberSelectordevient évident. Et de cette façon, les accessoires donnés au composant imbriqué ne sont évalués que lorsque cela est pertinent.Appliqué à votre violon : https://jsfiddle.net/ap1e9rk3/1/