IT技术 - 是否可以从 React Fiber 中检索组件的实例？ - 吾爱随笔录

在 React v16 之前——也就是说，在引入 React 纤维之前——可以采用 DOM 元素并检索 React 组件实例，如下所示：

const getReactComponent = dom => {
  let found = false;
  const keys = Object.keys(dom);

  keys.forEach(key => {
    if (key.startsWith('__reactInternalInstance$')) {
      const compInternals = dom[key]._currentElement;
      const compWrapper = compInternals._owner;
      const comp = compWrapper._instance;
      found = comp;
    }
  });

  return found || null;
};

这不再适用于使用新 Fiber 实现的 React v16。具体来说，上面的代码在该行抛出错误，const comparWrapper = compInternals._owner因为_owner不再有属性。因此，您也无法访问_instance.

我的问题是我们如何从 v16 的 Fiber 实现中的 DOM 元素中检索实例？

window.FindReact = function(dom) { let key = Object.keys(dom).find(key=>key.startsWith("__reactInternalInstance$")); let internalInstance = dom[key]; if (internalInstance == null) return null; if (internalInstance.return) { // react 16+ return internalInstance._debugOwner ? internalInstance._debugOwner.stateNode : internalInstance.return.stateNode; } else { // react <16 return internalInstance._currentElement._owner._instance; } }