从Chrome扩展程序中的Javascript获取reactInstance

Question

我目前在开发Chrome扩展程序时遇到问题.此扩展用于基于ReactJS的网站.我需要从页面中删除一些数据.他是该页面的一个例子.

<div class="UserWallet">
   <tbody>
      <tr class"Trans"><td>...</td></tr>
      ...
   <tbody>
</div>

当我使用Chrome检查器时,我可以看到我div class="UserWallet">有一个属性__reactInternalInstance.我发现了一个findReact(element)用于获取React实例的函数.此功能用于名为Steemit-More-Info的其他Chrome扩展程序.我有完全相同的功能,并使用相同的HTML元素作为参数,但我的功能不起作用.当我这样做时$(".UserWallet)",结果不包含属性__reactInternalInstance.但是在另一个扩展中,它使用相同的JQuery代码和相同的findReact函数.

这是findReact的代码.

var findReact = function(dom) {
   for (var key in dom) {
      if (key.startsWith("__reactInternalInstance$")) {
        var compInternals = dom[key]._currentElement;
        var compWrapper = compInternals._owner;
        var comp = compWrapper._instance;
        return comp;
      }
    }
    return null;
};

有没有人遇到过这个问题？是否有一个特殊的库需要包含在我的扩展中以便能够废弃reactInstance？

谢谢,

cedric_g

Answer 1

正如这里所述：

请注意，在 React 16 中，此 hack 将不起作用，因为内部属性名称已更改。

您尝试抓取的网站可能使用 React 16，因此您的方法将不起作用。我认为有一种奇怪的方法是挂钩react-devtoolsreact-devtools ，并获取已经为您填充的实例。

下面的代码是从React首页获取MarkdownEditor组件（最后一个），在控制台运行即可得到结果

var reactDevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__._fiberRoots;
var instArray = [...reactDevToolsHook[Object.keys(reactDevToolsHook)[0]]];
var mdInst = instArray[8];
console.log(mdInst.current.child.stateNode)

这是控制台输出

以及 React Devtools 的输出

注意：你必须安装React Developer Tools才能使这个技巧发挥作用