javascript React - 从子 DOM 元素获取 React 组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24462679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React - get React component from a child DOM element?
提问by Brad Parks
I'd like to be able to figure out what React component is associated with a certain DOM element.
我希望能够弄清楚什么 React 组件与某个 DOM 元素相关联。
For example, say I have a div, and I'm rendering my entire application using React. The div has to be rendered by a React component - but which one?
例如，假设我有一个 div，我正在使用 React 渲染我的整个应用程序。div 必须由 React 组件呈现 - 但哪一个？
I know that React supplies the method "getDOMNode" to get the DOM node associated with a React component, but I'd like to do the opposite.
我知道 React 提供了方法“ getDOMNode”来获取与 React 组件关联的 DOM 节点，但我想做相反的事情。
Is this possible?
这可能吗？
采纳答案by John Haugeland
No.
不。
A central concept in React is that you don't actually have a control in the DOM. Instead, your control is that factory function. What's in the DOM is the current render of the control.
React 中的一个中心概念是您实际上并没有在 DOM 中进行控制。相反，您的控制权是工厂功能。DOM 中的内容是控件的当前呈现。
If you actually need this, you can keep an object as a global variable, whose keys are the string representations of the names of factory functions, and whose values are the factory functions, then on your renderable div, keep an attribute containing the name of the factory function.
如果你真的需要这个，你可以保留一个对象作为全局变量，它的键是工厂函数名称的字符串表示，其值是工厂函数，然后在你的可渲染 div 上，保留一个包含名称的属性工厂功能。
But chances are this is a question of the XY problem (needing X, seeing a way with Y, then asking how to do Y.) Probably if you'd explain your goal there's a better way that better fits React's top-down conceptual model.
但这很可能是 XY 问题的问题（需要 X，看到 Y 的方法，然后询问如何做 Y。）可能如果你要解释你的目标，那么有一种更好的方法更适合 React 自上而下的概念模型.
Generally speaking, asking to get access to the control from its render is like asking to get access to an SVG from its cached PNG render. It's possible, but it's usually a red flag that something else is conceptually wrong.
一般来说，要求从其渲染中访问控件就像要求从其缓存的 PNG 渲染中访问 SVG。这是可能的，但通常是一个危险信号，表明其他东西在概念上是错误的。
回答by Venryx
Here's what I use, with React 15.3.0:
这是我在 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;
};
And then to use it:
然后使用它：
var someElement = document.getElementById("someElement");
FindReact(someElement).setState({test1: test2});
回答by selvan
If your situtation demands getting react element from DOM node, here is an approach, "Communicate via event and call back"
如果您的情况需要从 DOM 节点获取反应元素，这里是一种方法，“通过事件进行通信并回调”
You shall fire a custom event on DOM element and have event listener for that custom event in React component. This will map DOM element back to react component.
您应该在 DOM 元素上触发一个自定义事件，并在 React 组件中为该自定义事件设置事件侦听器。这会将 DOM 元素映射回 React 组件。
