Ler dados do componente React? [duplicado]

Question

Eu gostaria de poder ler os dados associados a um componente react em uma página da web de terceiros que está usando o React. Quero ser capaz de ler isso usando javascript nas ferramentas do console Chrome Dev nessa página. Isso é possível?

Por exemplo, eu tenho um elemento TR que é desenhado por react. Gostaria de obter este TR usando document.getElementById () regular e, em seguida, usá-lo para obter os dados de reação subjacentes.

Usando a extensão React Developer Tools, posso ver meus dados simplesmente lá embaixo de props.data - como posso ler isso?

Observe que estou tratando o React como uma caixa preta aqui.

Nota: por esta resposta, posso obter um objeto react de um elemento DOM, e funciona: React - obtendo um componente de um elemento DOM para depuração

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

Mas tendo conseguido isso, como posso chegar aos adereços?

Answer 1

Aha encontrei a chave. Você precisa ter cuidado ao obter o elemento DOM correto. Eu estava tentando descer muito na hierarquia. Depois de usar a extensão de ferramentas React Dev para "Inspecionar o elemento DOM correspondente", obtive o elemento certo e consegui obter seus adereços.