web-dev-qa-db-fra.com

comment définir displayName dans un composant fonctionnel [React]

Je sais que la définition de displayName est parfois requise, surtout lorsque vous avez affaire à des builds de production. Je veux savoir comment le configurer à l'aide de mon composant fonctionnel - est-ce possible/autorisé?

Voici ce que j'ai dans mon composant de classe:

var MyComponent = React.createClass({
    displayName: 'HeyHey',

    render: function() {
        console.log(this.displayName);
    }
});

Comment faire la même chose à l'intérieur d'un composant sans état?

javascriptreactjsfunctional-programming
14
a53-416

Les documents pour displayName say

La chaîne displayNamestring est utilisée dans les messages de débogage. Généralement, vous n'avez pas besoin de le définir explicitement car il est déduit du nom de la fonction ou de la classe qui définit le composant. Vous souhaiterez peut-être le définir explicitement si vous souhaitez afficher un nom différent à des fins de débogage ou lorsque vous créez un composant d'ordre supérieur, voir Envelopper le nom d'affichage pour un débogage facile pour plus de détails .

Dans votre cas, vous utiliseriez simplement

const MyComponent = (props) => { ... }

MyComponent.displayName = 'HeyHey'

Si vous cherchez à définir des propriétés par défaut sur un composant, utilisez plutôt defaultProps

const MyComponent = props => {
  return (
    <p>How you doin, {props.name}?</p>
  )
}

MyComponent.defaultProps = {
  name: 'Alice'
}

ReactDOM.render (<MyComponent/>, document.body)
// <p>How you doin, Alice?</p>
24
user633183

Deviner

const MyComponent = props => {
  return (
    <p>How you doin?</p>
  )
}

MyComponent.displayName = "MyComponent"
23
a53-416