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?
Les documents pour displayName
say
La chaîne
displayName
string 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>
Deviner
const MyComponent = props => {
return (
<p>How you doin?</p>
)
}
MyComponent.displayName = "MyComponent"