从React组件读取数据

Question

我希望能够在使用react的第三方网页上读取与react组件相关的数据。我希望能够在该页面的Chrome开发人员控制台工具中使用javascript来阅读这篇文章。这可能吗？

例如，我有一个TR元素，它是由react绘制的。我想使用常规document.getElementById((来获取这个TR，然后使用它来获取底层的react数据。

使用React Developer Tools Extension，我可以看到我的数据就在props.data下面——我该怎么读呢？

请注意，我在这里将React视为一个黑盒。

注意：根据这个答案，我可以从DOM元素中获得一个react对象，它可以工作：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;
};

但既然如此，我怎么才能拿到道具呢？

Answer 1

Ah我找到了钥匙。在获取正确的DOM元素时需要小心。我在等级制度上做得太过火了。有一次我使用React Dev工具扩展到"；检查匹配的DOM元素"；，然后我有了合适的元素，并且能够得到它的道具。