Comment inspectez-vous les éléments et les éléments de réaction dans la console?
React Developer Tools donne beaucoup de pouvoir pour inspecter l’arborescence des composants de React, examine les accessoires, les gestionnaires d’événements, etc. console du navigateur.
En chrome, je peux jouer avec l'élément DOM sélectionné dans la console avec $0. Existe-t-il un moyen d'extraire les informations sur les composants React à partir de $0 ou est-il possible de faire quelque chose de similaire avec les outils de développement de React?
Utilisation de Outils de développement de React vous pouvez utiliser $r pour obtenir une référence au composant React sélectionné.
La capture d'écran suivante montre que j'utilise React Developer Tools pour sélectionner un composant (Explorer) ayant un objet d'état appelé nodeList. Dans la console, je peux maintenant simplement écrire $r.state.nodeList pour référencer cet objet dans l'état. Même travail avec les accessoires (par exemple: $r.props.path)
Une réponse à votre question se trouve ici dans une question similaire que j’avais posée: Réagir - obtenir un composant d’un élément DOM pour le débogage
Je réponds ici parce que je n'ai pas les points de réputation nécessaires pour marquer comme duplicata ou pour commenter ci-dessus.
En gros, cela est possible si vous utilisez la version de développement de react, car vous pouvez utiliser TestUtils pour atteindre votre objectif.
Vous devez faire seulement deux choses:
- Stockez de manière statique le composant de niveau racine que vous avez obtenu de React.render ().
- Créez une fonction d'assistance de débogage globale que vous pouvez utiliser dans la console avec $ 0 et accédant à votre composant statique.
Ainsi, le code dans la console pourrait ressembler à quelque chose comme:
> getComponent($0).props
L'implémentation de getComponent peut utiliser React.addons.TestUtils.findAllInRenderedTree pour rechercher une correspondance en appelant getDOMNode sur tous les composants trouvés et en effectuant une correspondance avec l'élément passé.
Attribuez l'objet state ou prop à l'objet window:
window.title = this.state.title
Ensuite, à partir de la console des outils de développement, vous pouvez essayer différentes méthodes sur l'objet exposé, telles que:
window.title.length
8
Ouvrez la console (Firefox, Chrome) et localisez tous les éléments DOM rendus ou réactjs ou exécutez un script js pour le localiser:
document.getElementById('ROOT')
Recherchez ensuite les propriétés d'élément dans l'afficheur de propriétés d'objet pour les attributs de nom commençant par '__reactInternalInstace $ ....', développez _DebugOwner et consultez stateNode.
Le stateNode trouvé contiendra (s'il a) les attributs 'state' et 'props' utilisés dans l'application reajs.