Qu'est-ce que Réagir composant "displayName" est utilisé pour?

Je sais que c'est il considéré comme une bonne pratique au nom de réagir composant par l'ajout d'un displayName bien, mais pas sûr que je sais pourquoi. Dans réagissent docs, il dit:

Le nom d'affichage de chaîne est utilisé dans les messages de débogage. JSX définit cette valeur automatiquement; voir JSX dans la Profondeur.

Pourquoi est-il si important? ce qui va se passer si je ne vais pas l'ajouter? (jusqu'à présent je ne l'ai pas et pas eu de problèmes de débogage)

Existe-il des recommandations de bonnes pratiques sur la façon de nommer les composants?

  • si vous n'ajoutez pas de composant nom ne s'affiche pas., et ça va être dur de débogage pour l'état. Mais si vous utilisez Es6 pour créer un composant (extension de Composant), alors vous n'avez pas besoin d'ajouter un nom d'affichage manuellement pour chaque composant.
InformationsquelleAutor Kuf | 2017-01-11
  1. 24

    J'ai toujours mis displayName le même nom que la variable que je suis à l'affecter. C'est seulement aurait été utilisé dans les compilations de développement car elle est enlevée par la mort-l'élimination du code sur la production construit et ne doit pas être invoqué au sein de votre application.

    Que de l'endroit où il est utilisé, c'est principalement au sein de réagir, les messages d'erreur. C'est pourquoi il est mentionné pour être utile pour le débogage. Si aucun nom ne peut être dérivée des messages d'erreur par défaut-à-dire Component qui est extrêmement difficile à déboguer, quand vous avez plus de 1 composant dans votre projet.

    Voici quelques messages d'erreur que référence displayName dans le réagir source:

    Invalide En Retour

    De style en ligne d'erreur

    • Comment fait-on pour définir le nom d'affichage? Selon réagir docs il semble être inferenced à partir du nom de la composante, mais ne dit pas comment le paramétrer manuellement pour les non-HOCs.
    • c'est une propriété statique. Le moyen le plus rapide est de définir directement, c'est à dire. hoc.displayName = "hocName";
    InformationsquelleAutor kwelch
  2. 1

    cet article qui m'a aidé:

    Comment puis-je obtenir la chaîne de nom de Réagir composant Natif de classe?

        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
      }
    }
    InformationsquelleAutor Edward Koetsjarjan