0
658
VistasAcceda a React Props & Functions a través de Javascript nativo
Estoy estudiando cómo funciona actualmente React y estoy un poco confundido sobre cómo acceder a las funciones que están ocultas en los accesorios con javascript nativo . Soy consciente de que si descargo la extensión de reacción, puedo verlos en la consola de desarrollo de Google, pero esto no es lo que necesito. No tengo acceso a los componentes de reacción directamente porque estoy creando una extensión de Google Chrome.
Por ejemplo, en Chrome Developer Console, puedo escribir lo siguiente:
var elem = document.querySelector('.wrap-XdW9S1Ib');Digamos que este elemento es mi elemento de interés y tiene un evento onClick dentro de sus accesorios al que me gustaría acceder para automatizar los clics con fines de prueba.
Adjunto una imagen del progreso hasta el momento:
Entonces puedo escribir algo como...
elem.__reactProps$63clhtkk874Que muestra lo siguiente:
Tenga en cuenta que puede ver el evento onClick y otras funciones que reacciona crea.
Ahora... si intentas hacer lo mismo a través del código. En particular for(key in elem){console.log(key);} por alguna razón, __reactFiber y __reactProps no aparecen.
Nota: Tenga en cuenta que align, title, lang, etc... aparecen todos, pero los __reactProps no están allí ahora.
Nota n.º 2: mi código es idéntico al que ve arriba en las imágenes y funciona bien al imprimirlo en la consola (como también puede ver en la captura de pantalla), excepto..., simplemente no veo los eventos de reacción.
¿Por qué estos aparecen en la consola del desarrollador y NO en la misma consola a través de mi código que escribo? En otras palabras, cuando escribo en la consola, no lo solicita a través de un aviso (es decir, solo un archivo .js normal)
1 Respuestas
Responde la pregunta0
Sólo estoy adivinando por aquí. Pero a juzgar por los guiones bajos, probablemente esté accediendo a elementos del DOM virtual interno de React. Que puede o no ser lo mismo que el DOM. He leído que React se creó con el propósito de abstraer la manipulación DOM imperativa que usa el javascript de vainilla.
Aunque a veces no se puede evitar interactuar con el DOM, cada vez que veo la manipulación del DOM en React, pienso en el gancho useRef . Al establecer el enlace useRef en una variable y vincularlo a un elemento DOM, puede console.log variable.current y ver el elemento DOM real y trabajar con él en un enlace useEffect, por ejemplo. ¡Espero que esto haya sido al menos un poco útil! ¡Todo lo mejor en sus esfuerzos de aprendizaje!