reactjs - 是否可以从 React Fiber 中检索组件的实例？

Question

在 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 元素中检索实例？

Answer 1

您可以尝试以下功能（更新为适用于 React <16 和 16+）：

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

用法：

var someElement = document.getElementById("someElement");
FindReact(someElement).setState({test1: test2});