通过DOM节点获取React组件数据

从组件本身内部检索React组件的DOM节点是相当简单的，但是如果要向后工作怎么办：按DOM节点检索组件的实例呢？这个方法是旧的Dojo Toolkit的Dijit框架允许使用的dijit.byId方法，因此让我思考是否可以使用React进行同样的操作。事实证明，您可以按DOM节点检索组件实例！

以下函数允许您通过DOM节点获取React组件实例：

function findReactElement(node) {     for (var key in node) {         if (key.startsWith("__reactInternalInstance$")) {             return node[key]._debugOwner.stateNode;         }     }     return null;}

如果该节点是React组件的根，您将看到大量令人惊奇的信息，例如其属性，状态，上下文，引用，方法列表等：

修改道具/状态和调用渲染方法似乎实际上并没有执行任何操作，因此从外部看似乎无法进行操作，但是如果仅需检查，能够基于DOM节点获取组件实例将非常有用。