从 React 组件读取数据？ [复制]答案

【问题标题】：Read data from React component? [duplicate]从 React 组件读取数据？ [复制]
【发布时间】：2021-03-12 20:42:21
【问题描述】：

我希望能够在使用 React 的第 3 方网页上读取与 React 组件相关的数据。我希望能够在该页面上的 Chrome 开发控制台工具中使用 javascript 阅读此内容。这可能吗？

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

使用 React 开发者工具扩展，我可以看到我的数据就在 props.data 下——我该如何读取它？

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

注意：根据这个答案，我可以从 DOM 元素中获取一个反应对象，它可以工作： React - getting a component from a DOM element for debugging

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

但是得到了那个，我怎么才能得到道具呢？

【问题讨论】：

关闭 - 这个让我可以访问我想要的元素。 stackoverflow.com/questions/29321742/… 但是我还是不知道怎么弄到道具的东西。关闭！

标签： reactjs google-chrome-devtools

【解决方案1】：

啊哈，我找到了钥匙。您需要小心获取正确的 DOM 元素。我在层次结构上尝试得太远了。一旦我使用 React Dev 工具扩展来“检查匹配的 DOM 元素”，我就有了正确的元素并且能够获得它的道具。

【讨论】：