Reaccionar De Herramientas De Desarrollador dar una gran cantidad de energía para inspeccionar el Reaccionar árbol de componentes, y mirar accesorios, controladores de eventos, etc. Sin embargo, lo que realmente me gustaría hacer es ser capaz de inspeccionar las estructuras de datos en el navegador de la consola.

En chrome puedo jugar con el seleccionado actualmente elemento DOM en la consola mediante el uso de $0. Es allí una manera de extraer Reaccionar componente info de $0, o es posible hacer algo similar con el Reaccionar Dev Tools?

  • ¿por qué no acaba de registrar el estado y los accesorios en su componente?
  • debido a que lleva más tiempo
  • No he probado a mí mismo, pero en Reaccionar 0.13 introdujeron Reaccionar. findDOMNode. Teóricamente, podría ser posible para seleccionar el elemento de DOM, convertirlo en Reaccionar Elemento a través de la React.findDOMNode($0) y acceder a su estado y los apoyos a través de que ReactElement?
  • sólo devuelve el mismo nativo nodo DOM.
  • Posibles duplicados de Reaccionar – obtención de un componente de un elemento de DOM para la depuración
  • Teniendo en cuenta esta pregunta se la hicieron en primer lugar, no es la nueva pregunta de ser el duplicado?

InformationsquelleAutor Gil Birman | 2015-03-19

4 Comentarios

  1. 58

    Utilizando Reaccionar De Herramientas De Desarrollador puede utilizar $r para obtener una referencia a los seleccionados de Reaccionar Componente.

    La siguiente captura de pantalla muestra que yo uso React Developer Tools para seleccionar un componente (Explorer) que tiene un estado-objeto llamadonodeList. En la consola ahora puedo simplemente escribir $r.state.nodeList para hacer referencia a este objeto en el estado. El mismo funciona con los accesorios (ej.: $r.props.path)

    ¿Cómo inspeccionar una de reaccionar de los elementos de utilería & estado en la consola?

    • Se parece a $r i sólo el nodo DOM, no reaccionar instancia de componente.
    • No estoy seguro de lo que quieres decir. Pero la pregunta era «¿cómo inspeccionar el de la estructura de datos de reaccionar de los componentes». Y creo que el $r permite hacer exactamente eso.
    • estás en lo cierto! he seleccionado el mal elemento. gracias!
    • Muy útil! Gracias.
  2. 15

    Una respuesta a su pregunta se puede encontrar aquí en una pregunta similar, me preguntó:
    Reaccionar – obtención de un componente de un elemento de DOM para la depuración

    Te estoy dando una respuesta aquí porque no tengo los necesarios puntos de reputación con el fin de marcar como duplicar o comentario anterior.

    Básicamente, esto es posible si usted está utilizando la versión en desarrollo de reaccionar porque se puede aprovechar la TestUtils para lograr su objetivo.

    Que usted necesita hacer sólo dos cosas:

    • Estáticamente tienda de la raíz a nivel de componente que se obtuvo de Reaccionar.render().
    • Crear un global de depuración función auxiliar que usted puede usar en la consola con $0 de acceso a su componente estático.

    Por lo que el código en la consola podría ser algo como:

    > getComponent($0).props

    La aplicación de getComponent puede utilizar React.addons.TestUtils.findAllInRenderedTree búsqueda por coincidencia por llamar getDOMNode en todos los componentes y la comparación con el pasado en el elemento.

  3. 4

    Abrir la consola (Firefox,Chrome) y localizar cualquier reactjs prestados elemento de DOM o, alternativamente, ejecutar js script para localizarlo:

    document.getElementById('ROOT')

    A continuación, compruebe las propiedades de los elementos en la propiedad de objeto en el visor de atributos con nombre que empieza como ‘__reactInternalInstace$….’ ampliar _DebugOwner y ver stateNode.

    Encontrado stateNode contendrá (si es que tiene) ‘estado’ y ‘apoyos atributos que se utiliza mucho en reactjs aplicación.

  4. 2

    Asignar el estado o la proposición objeto el objeto de ventana:

    window.title = this.state.title

    Y, a continuación, a partir de la dev consola de herramientas que usted puede probar diferentes métodos en el objeto expuesto, tales como:

    window.title.length

    8

    • Sí, purelly para la depuración, algo así como: de la ventana.reacjs = Reaccionar; ventana.reacjsStore = tienda;

Dejar respuesta

Please enter your comment!
Please enter your name here