Je construis des composants React et aimerais parfois enregistrer sur la console le type de composant rendu, par displayName
, que JSX utilise pour afficher le nom d’un composant.
À partir du contexte d’un composant, comment puis-je accéder à la propriété displayName
?
Par exemple, comment puis-je faire en console.log
instruction console.log
dans cet exemple le displayName du composant?
var Hello = React.createClass({ displayName: 'HeyHey', render: function() { console.log(this.displayName); return Hello {this.props.name}; } });
Sortie prévue dans la console:
HeyHey
Il est disponible en tant que propriété publique this.constructor.displayName
.
Vous pouvez le trouver sur this._descriptor.type
Hello {this._descriptor.type.displayName}
démo
Utilisez-le uniquement pour les tests; cela pourrait cesser de fonctionner à tout moment. Il est peu probable de travailler en 0.12.
Vous trouverez ci-dessous un extrait de code complet illustrant en détail comment obtenir et définir le «nom» des composants de class
et des composants fonctionnels sans état.
Vous obtenez une propriété name
sur un composant gratuitement , à partir du nom de la class
Component ou du composant fonctionnel sans état dans le code. Cependant, sachez que cela ne sera pas défini dans le cas de classes / fonctions anonymes et peut également être effacé / modifié par une minification du code.
Vous pouvez définir une propriété displayName
personnalisée sur la class
Component ou Component fonctionnel sans état, si vous devez personnaliser. Ceci est particulièrement utile pour les composants d’ordre supérieur. Il survivra toujours à la minification.
Sur une class
, et voici la partie qui peut ne pas être évidente , le name
et displayName
sont des propriétés sur la classe elle-même . C’est pourquoi, depuis l’instance de composant, vous devez utiliser this.constructor.name
/ this.constructor.displayName
et avec une référence à l’instance de Component, vous utilisez Component.name
/ Component.displayName
. Le code ci-dessous le montre en pratique.
La meilleure pratique pour utiliser un nom de composant semble être :
displayName
name
'Component'
/ 'Anonymous'
class ClassComponent extends React.Component { componentDidMount () { if (!this.props.wrapped) { console.log('ClassComponent') console.log(` displayName: ${this.constructor.displayName}`) console.log(` name: ${this.constructor.name}\n\n`) } } render () { return ClassComponent {this.props.wrapped && '(wrapped)'} } } ClassComponent.displayName = 'ClassComponentCustom' const SFComponent = (props) => ( SFComponent {props.wrapped && '(wrapped)'} ) SFComponent.displayName = 'SFComponentCustom' const wrap = (WrappedComponent) => { class Wrapper extends React.Component { componentDidMount () { console.log('HOC') console.log(` displayName: ${this.constructor.displayName}`) console.log(` name: ${this.constructor.name}`) console.log(` wrapping a Component with:`) console.log(` displayName: ${WrappedComponent.displayName}`) console.log(` name: ${WrappedComponent.name}\n\n`) } render () { return } } // for the wrapped component // check for displayName for something more descriptive, // else fall back to name const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name Wrapper.displayName = `WrapperCustom<${wrappedComponentName}>` return Wrapper } const WrappedClassComponent = wrap(ClassComponent) const WrappedSFComponent = wrap(SFComponent) const Example = () => ( ) ReactDOM.render( , document.getElementById('root') )
.example > div { font-family: 'Arial'; font-size: 14px; padding: 5px 10px; margin-bottom: 10px; background: rgb(240,240,240); border-radius: 4px; }