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节点获取反应元素，这里有一种方法，“通过事件和回调进行沟通”

您将在DOM元素上触发自定义事件，并在React组件中为该自定义事件提供事件侦听器。这会将DOM元素映射回反应组件。

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

3 个答案: