Leggere i dati dal componente React? [duplicare]

Question

Vorrei essere in grado di leggere i dati associati a un componente di reazione su una pagina web di terze parti che utilizza React. Voglio essere in grado di leggerlo utilizzando javascript all'interno degli strumenti della console di sviluppo di Chrome in quella pagina. È possibile?

Ad esempio, ho un elemento TR che è disegnato da React. Vorrei ottenere questo TR utilizzando il normale document.getElementById () e quindi utilizzarlo per ottenere i dati di reazione sottostanti.

Usando l'estensione React Developer Tools posso vedere i miei dati semplicemente seduti sotto props.data - come posso leggerlo?

Si prega di notare che qui sto trattando React come una scatola nera.

Nota: per questa risposta posso ottenere un oggetto React da un elemento DOM e funziona: React - ottenere un componente da un elemento DOM per il debug

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;
};

Ma dopo averlo capito, come posso arrivare agli oggetti di scena?

Answer 1

Aha ho trovato la chiave. Devi stare attento a ottenere l'elemento DOM corretto. Stavo cercando troppo in basso nella gerarchia. Dopo aver utilizzato l'estensione degli strumenti React Dev per "Ispezionare l'elemento DOM corrispondente", ho avuto l'elemento giusto e sono stato in grado di ottenere i suoi oggetti di scena.