A quoi sert React composant 'displayName' est utilisé?
Je sais que c'est cela a été considéré comme une bonne pratique pour nommer le composant react en ajoutant une propriété displayName, mais je ne sais pas trop pourquoi. Dans React Docs, il est dit:
La chaîne displayName est utilisée dans les messages de débogage. JSX définit cette valeur automatiquement; voir JSX en détail.
Pourquoi est-ce si important? que se passera-t-il si je ne l'ajoute pas? (jusqu'à présent, je ne l'avais pas et je n'ai eu aucun problème de débogage)
Existe-t-il des recommandations/bonnes pratiques sur la façon de nommer les composants?
J'ai toujours défini displayName sur le même nom que la variable à laquelle je l'affecte. Cela ne serait utilisé que dans les builds de développement car il est supprimé via l'élimination du code mort sur les builds de production et ne doit pas être utilisé dans votre application.
Quant à l'endroit où il est utilisé, c'est principalement dans la messagerie d'erreur de réaction. C'est pourquoi il est mentionné comme étant utile pour le débogage. Si aucun nom ne peut être dérivé, les messages d'erreur indiquent par défaut Component, ce qui est extrêmement difficile à déboguer, lorsque vous avez plus d'un composant dans votre projet.
Voici quelques messages d'erreur faisant référence à displayName dans la source de réaction:
cet article m'a aidé:
Comment puis-je obtenir le nom de chaîne de React Classe de composant natif?
class CardGroup extends Component {
render() {
return (
<div>{this.props.children}</div>
)
}
}
CardGroup.propTypes = {
children: function (props, propName, componentName) {
const prop = props[propName]
let error = null
React.Children.forEach(prop, function (child) {
if (child.type !== Card) {
error = new Error('`' + componentName + '` children should be of type `Card`.');
}
})
return error
}
}