Читать данные из компонента React? [дубликат]

Dec 01 2020

Я хотел бы иметь возможность читать данные, связанные с компонентом реакции на сторонней веб-странице, которая использует React. Я хочу иметь возможность читать это с помощью javascript в инструментах консоли Chrome Dev на этой странице. Это возможно?

Например, у меня есть элемент TR, который отрисовывается с помощью реакции. Я хотел бы получить этот TR с помощью обычного document.getElementById (), а затем использовать его для получения базовых данных реакции.

Используя расширение React Developer Tools Extension, я могу видеть, что мои данные просто находятся в папке props.data - как я могу это прочитать?

Обратите внимание, что здесь я рассматриваю React как черный ящик.

Примечание: в соответствии с этим ответом я могу получить объект реакции из элемента DOM, и он работает: React - получение компонента из элемента DOM для отладки

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

Но, получив это, как я могу добраться до реквизита?

Ответы

1 DanielWilliams Dec 01 2020 at 06:19

Ага, я нашел ключ. Вам нужно быть осторожным при получении правильного элемента DOM. Я пытался слишком низко по иерархии. Как только я использовал расширение инструментов React Dev, чтобы «проверить соответствующий элемент DOM», у меня был нужный элемент, и я смог получить его свойства.