Comment contrôlez-vous réagir un élément de accessoires & de l'état dans la console?

Réagir Outils De Développement donnent beaucoup de puissance pour inspecter la Réagir la composante de l'arbre, et de regarder les accessoires, les gestionnaires d'événements, etc. Cependant, ce que j'aimerais vraiment faire est d'être en mesure d'inspecter ces structures de données dans le navigateur de la console.

Dans google chrome, je peux jouer avec actuellement sélectionné élément du DOM dans la console à l'aide de $0. Est-il un moyen pour extraire Réagir composant info de $0, ou est-il possible de faire quelque chose de similaire avec les Réagir Outils de Dev?

  • pourquoi ne pas le journal de l'état et d'accessoires dans votre composant?
  • parce que cela prend plus de temps
  • N'ai pas essayé moi-même, mais pour Réagir 0.13 ils ont présenté Réagir. findDOMNode. Théoriquement, il pourrait être possible de sélectionner votre élément DOM, convertir Réagir Élément via React.findDOMNode($0) et accéder à votre état et d'accessoires par le biais de ReactElement?
  • elle retourne le même natif nœud DOM.
  • Double Possible de Réaction - l'obtention d'un composant à partir d'un élément du DOM pour le débogage
  • L'examen de cette question a été posée tout d'abord, ne serait pas la nouvelle question d'être le double?

InformationsquelleAutor Gil Birman | 2015-03-19
  1. 51

    À l'aide de Réagir Outils De Développement vous pouvez utiliser $r pour obtenir une référence à l'sélectionnés Réagir Composant.

    La capture d'écran suivante vous montre ce que j'utilise React Developer Tools pour sélectionner un composant (Explorer) qui dispose d'un état-objet appelénodeList. Dans la console, je peux maintenant écrire simplement $r.state.nodeList pour faire référence à cet objet dans l'état. Même fonctionne avec les accessoires (ex.: $r.props.path)

    Comment contrôlez-vous réagir un élément de accessoires & de l'état dans la console?

    • Ressemble $r j'ai juste le nœud DOM, pas du réagir instance de composant.
    • Pas sûr de ce que tu veux dire. Mais la question était "comment inspecter la structure des données de réagir composants". Et je pense que le $r vous permet de faire exactement cela.
    • vous avez raison! j'ai choisi le mauvais élément. merci!
    • Extrêmement utile! Merci.
    InformationsquelleAutor Jürgen Brandstetter
  2. 15

    La réponse à votre question se trouve ici dans une question similaire, je lui ai demandé:
    Réaction - l'obtention d'un composant à partir d'un élément du DOM pour le débogage

    Je suis fournissant une réponse ici, car je n'ai pas le nécessaire de points de réputation afin de marquer les doublons ou de faire des commentaires ci-dessus.

    Fondamentalement, cela est possible si vous utilisez la version de développement de réagir parce que vous pouvez tirer parti de la TestUtils d'atteindre votre objectif.

    Vous avez besoin de ne faire que deux choses:

    • Statiquement stocker niveau de la racine du composant que vous avez obtenu à partir de Réagir.render().
    • Créer un mondial de débogage fonction d'assistance que vous pouvez utiliser dans la console avec 0 $qui accède à votre composante statique.

    Donc le code dans la console pourrait ressembler à quelque chose comme:

    > getComponent($0).props

    La mise en œuvre de getComponent pouvez utiliser React.addons.TestUtils.findAllInRenderedTree à la recherche pour le match en appelant getDOMNode sur des composants et le rapprochement avec le passé dans l'élément.

    InformationsquelleAutor LodeRunner28
  3. 2

    Affecter l'état ou des accessoires objet à l'objet window:

    window.title = this.state.title

    Et ensuite à partir des outils de dev console, vous pouvez essayer différentes méthodes sur l'objet exposé, tels que:

    window.title.length

    8

    • Oui, purelly pour le débogage, quelque chose comme: fenêtre.reacjs = Réagir; la fenêtre.reacjsStore = magasin;
    InformationsquelleAutor Fellow Stranger
  4. 1

    Ouvrez la console (Firefox,Chrome) et localiser toutes reactjs rendu de l'élément DOM ou, alternativement, d'exécuter le script js pour la localiser:

    document.getElementById('ROOT')

    Puis vérifier les propriétés d'un élément dans la propriété de l'objet de la visionneuse d'attributs avec nom commençant comme '__reactInternalInstace$....' développez _DebugOwner et voir stateNode.

    Le trouve stateNode contiendra (si elle en a) "état" et "accessoires" attributs qui est largement utilisé dans reactjs app.

    InformationsquelleAutor harvyS