Daten von der React-Komponente lesen? [Duplikat]

Question

Ich möchte in der Lage sein, die mit einer Reaktionskomponente verknüpften Daten auf einer Webseite eines Drittanbieters zu lesen, die React verwendet. Ich möchte dies mit Javascript in den Chrome Dev-Konsolentools auf dieser Seite lesen können. Ist das möglich?

Zum Beispiel habe ich ein TR-Element, das durch Reagieren gezeichnet wird. Ich möchte diese TR mit regulärem document.getElementById () abrufen und diese dann verwenden, um die zugrunde liegenden Reaktionsdaten abzurufen.

Mit der React Developer Tools-Erweiterung kann ich meine Daten nur unter props.data sehen - wie kann ich das lesen?

Bitte beachten Sie, dass ich React hier als Black Box behandle.

Hinweis: Gemäß dieser Antwort kann ich ein Reaktionsobjekt von einem DOM-Element abrufen, und es funktioniert: Reagieren - Abrufen einer Komponente von einem DOM-Element zum Debuggen

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

Aber wie kann ich zu Requisiten kommen, wenn ich das bekommen habe?

Answer 1

Aha, ich habe den Schlüssel gefunden. Sie müssen vorsichtig sein, um das richtige DOM-Element zu erhalten. Ich habe zu weit unten in der Hierarchie versucht. Nachdem ich die Erweiterung der React Dev-Tools verwendet hatte, um "das passende DOM-Element zu überprüfen", hatte ich das richtige Element und konnte seine Requisiten erhalten.