React - 从子DOM元素中获取React组件？

Question

我希望能够弄清楚React组件与某个DOM元素相关联的内容.

例如,假设我有一个div,并且我使用React渲染我的整个应用程序.div必须由React组件呈现 - 但是哪一个？

我知道React提供了方法" getDOMNode "来获取与React组件关联的DOM节点,但我想做相反的事情.

这可能吗？

Answer 1

没有.

React的一个核心概念是你实际上没有DOM中的控件.相反,您的控制是工厂功能.DOM中的内容是控件的当前呈现.

如果确实需要这个,可以将对象保存为全局变量,其键是工厂函数名称的字符串表示形式,其值是工厂函数,然后在可渲染div上保留包含名称的属性工厂功能.

但很有可能这是XY问题的问题(需要X,看Y的方式,然后询问如何做Y).可能如果你解释你的目标,那么更好的方法更适合React的自上而下的概念模型.

一般来说,要求从其渲染中访问控件就像是要求从其缓存的PNG渲染中访问SVG.这是可能的,但它通常是一个红旗,其他东西在概念上是错误的.

Answer 2

以下是我使用的React 15.3.0:

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

然后使用它:

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

Answer 3

如果您的情况要求从DOM节点获取react元素，则可以采用以下方法：“通过事件进行通讯并回调”

您应该在DOM元素上触发一个自定义事件，并在React组件中具有该自定义事件的事件监听器。这会将DOM元素映射回反应组件。