ReactJS – Comment puis-je accéder à displayName d’un composant en utilisant javascript?

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 :

  • Essayez d’utiliser displayName
  • Si ce n’est pas défini, essayez d’utiliser le name
  • C’est non défini, retombez sur une chaîne codée en dur comme '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; }