Lire les données du composant React? [dupliquer]

Dec 01 2020

Je souhaite pouvoir lire les données associées à un composant react sur une page Web tierce qui utilise React. Je veux pouvoir lire ceci en utilisant javascript dans les outils de la console Chrome Dev sur cette page. Est-ce possible?

Par exemple, j'ai un élément TR qui est dessiné par react. Je voudrais obtenir ce TR en utilisant document.getElementById () ordinaire, puis l'utiliser pour obtenir les données de réaction sous-jacentes.

En utilisant l'extension React Developer Tools, je peux voir mes données juste là sous props.data - comment puis-je lire cela?

Veuillez noter que je traite React comme une boîte noire ici.

Remarque: par cette réponse, je peux obtenir un objet react à partir d'un élément DOM, et cela fonctionne: React - obtenir un composant d'un élément DOM pour le débogage

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

Mais après avoir obtenu cela, comment puis-je accéder aux accessoires?

Réponses

1 DanielWilliams Dec 01 2020 at 06:19

Aha j'ai trouvé la clé. Vous devez faire attention en obtenant le bon élément DOM. J'essayais trop loin dans la hiérarchie. Une fois que j'ai utilisé l'extension des outils React Dev pour "Inspecter l'élément DOM correspondant", j'ai eu le bon élément et j'ai pu obtenir ses accessoires.