时间戳

首页 > 解决方案 > 从 React 组件读取数据？

reactjs - 从 React 组件读取数据？

问题描述

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

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

使用 React 开发者工具扩展，我可以看到我的数据就在 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;
};

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

标签： reactjsgoogle-chrome-devtools

解决方案

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

推荐阅读