React bileşeninden veri okunsun mu? [çiftleme]

Question

React kullanan bir 3. taraf web sayfasında bir react bileşeniyle ilişkili verileri okuyabilmek istiyorum. Bunu o sayfadaki Chrome Dev konsol araçları içindeki javascript kullanarak okuyabilmek istiyorum. Mümkün mü?

Örneğin, react tarafından çizilmiş bir TR elemanım var. Bu TR'yi normal document.getElementById () kullanarak almak ve ardından bunu temeldeki tepki verilerini almak için kullanmak istiyorum.

React Developer Tools Uzantısını kullanarak verilerimin props.data altında durduğunu görebiliyorum - bunu nasıl okuyabilirim?

Lütfen burada React'e kara kutu muamelesi yaptığımı unutmayın.

Not: Bu yanıta göre bir DOM öğesinden bir react nesnesi alabilirim ve işe yarıyor: React - hata ayıklama için bir DOM öğesinden bir bileşen alma

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

Ama bunu elde ettikten sonra, sahne dekoruna nasıl ulaşabilirim?

Answer 1

Aha anahtarı buldum. Doğru DOM öğesini alırken dikkatli olmanız gerekir. Hiyerarşi konusunda çok fazla uğraşıyordum. "Eşleşen DOM öğesini incelemek" için React Dev araçları uzantısını kullandıktan sonra, doğru öğeye sahip oldum ve desteğini alabildim.