¿Leer datos del componente React? [duplicar]
Me gustaría poder leer los datos asociados con un componente de reacción en una página web de terceros que esté usando React. Quiero poder leer esto usando javascript dentro de las herramientas de la consola de desarrollo de Chrome en esa página. es posible?
Por ejemplo, tengo un elemento TR que es dibujado por react. Me gustaría obtener este TR usando document.getElementById () regular y luego usarlo para obtener los datos de reacción subyacentes.
Usando la extensión React Developer Tools, puedo ver mis datos allí debajo de props.data, ¿cómo puedo leer eso?
Tenga en cuenta que estoy tratando React como una caja negra aquí.
Nota: según esta respuesta, puedo obtener un objeto de reacción de un elemento DOM, y funciona: Reaccionar: obtener un componente de un elemento DOM para depurar
window.findReactComponent = function(el) {
for (const key in el) {
if (key.startsWith('__reactInternalInstance$')) {
const fiberNode = el[key];
return fiberNode && fiberNode.return && fiberNode.return.stateNode;
}
}
return null;
};
Pero habiendo conseguido eso, ¿cómo puedo llegar a los accesorios?
Respuestas
Ajá encontré la llave. Debe tener cuidado al obtener el elemento DOM correcto. Estaba intentando demasiado abajo en la jerarquía. Una vez que usé la extensión de herramientas de React Dev para "Inspeccionar el elemento DOM correspondiente", tuve el elemento correcto y pude obtener sus accesorios.