我希望能够弄清楚什么 React 组件与某个 DOM 元素相关联。
例如，假设我有一个 div，我正在使用 React 渲染我的整个应用程序。div 必须由 React 组件呈现 - 但哪一个？
我知道 React 提供了方法“ getDOMNode ”来获取与 React 组件关联的 DOM 节点，但我想做相反的事情。
这可能吗？
React - 从子 DOM 元素获取 React 组件？
IT技术
javascript
dom
reactjs
2021-04-20 09:50:59
3个回答
不。
React 中的一个中心概念是您实际上并没有在 DOM 中进行控制。相反，您的控制权是工厂功能。DOM 中的内容是控件的当前呈现。
如果你真的需要这个，你可以保留一个对象作为全局变量，它的键是工厂函数名称的字符串表示，其值是工厂函数，然后在你的可渲染 div 上，保留一个包含名称的属性工厂功能。
但这很可能是 XY 问题的问题（需要 X，看到 Y 的方法，然后询问如何做 Y。）可能如果你要解释你的目标，那么有一种更好的方法更适合 React 自上而下的概念模型.
一般来说，要求从其渲染中访问控件就像要求从其缓存的 PNG 渲染中访问 SVG。这是可能的，但通常是一个危险信号，表明其他东西在概念上是错误的。
这是我在 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});
如果您的情况需要从 DOM 节点获取react元素，这里是一种方法，“通过事件进行通信并回调”
您应该在 DOM 元素上触发一个自定义事件，并在 React 组件中为该自定义事件设置事件侦听器。这会将 DOM 元素映射回 React 组件。