Chrome 扩展（内容脚本）+ React：从 DOM 获取 React 组件？答案

【问题标题】：Chrome Extension (content script) + React: getting React component from DOM?Chrome 扩展（内容脚本）+ React：从 DOM 获取 React 组件？
【发布时间】：2017-02-17 07:18:34
【问题描述】：

我了解，有一个 chrome 扩展“React Dev Tools”可以检查 React 应用程序。想知道，是否可以从网页上注入的 Chrome 扩展内容脚本中读取 React 组件对应的 props。

例如$('.todo-list').react.props ??

【问题讨论】：

^ 问题主要是获取 React Node 的引用，所以可以访问 props
欺骗 React.render 并分配属性：React - getting a component from a DOM element for debugging

标签： reactjs google-chrome-extension

【解决方案1】：

如果你不能欺骗或暴露 React 内部，另一种访问 React 节点的方法是这样的：

const root = document.querySelector('[data-reactroot]');
const instance = root[Object.keys(root)[0]];

这将为您提供一个在 _currentElement 键中具有根 React 元素的对象。

【讨论】：