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

Posted 2023-02-21

【中文标题】React - 从子 DOM 元素获取 React 组件？

【英文标题】：React - get React component from a child DOM element?

【发布时间】：2014-08-19 04:54:31

【问题描述】：

我希望能够弄清楚哪个 React 组件与某个 DOM 元素相关联。

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

我知道 React 提供方法“getDOMNode”来获取与 React 组件关联的 DOM 节点，但我想做相反的事情。

这可能吗？

【参考方案1】：

没有。

React 的一个核心概念是您实际上在 DOM 中没有控件。相反，您的控制是工厂功能。 DOM 中的内容是控件的当前渲染。

如果你真的需要这个，你可以把一个对象作为一个全局变量，它的键是工厂函数名称的字符串表示，它的值是工厂函数，然后在你的可渲染div上，保留一个包含的属性工厂函数的名称。

但这很可能是 XY 问题的问题（需要 X，与 Y 一起寻找方法，然后询问如何做 Y。）如果你解释你的目标，可能会有更好的方法更适合 React 的顶部-下概念模型。

一般来说，请求从其渲染中访问控件就像请求从其缓存的 PNG 渲染中访问 SVG。这是可能的，但它通常是一个危险信号，表明其他东西在概念上是错误的。

【讨论】：

好点，但是像 React Native 这样的程序和像 React DevTools 这样的工具都创建了一种从 DOM/native 元素获取 React 组件的方法。

总是有例外，例如我正在研究实现老式自定义 DnD 而不是使用 html5 DnD，这样我就可以使用拖动反馈图像做很多时髦的动画和事情。

不，这不是 XY 问题。我需要这个用于需要与 reactjs 网页交互的用户脚本。

@frontsidebus - 按照 ios 的消息驱动 UI 系统的工作方式，React Native 需要这样做。 DevTools 这样做是因为它是一个调试器。

@Andy - 你是对的，总会有例外。不过，在大多数情况下，我会花 2 美元让你使用 CSS 过渡更轻松

【参考方案2】：

如果您的情况需要从 DOM 节点获取 react 元素，这里有一种方法，“通过事件通信并回调”

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

【讨论】：

很棒的建议，我有一个表单验证脚本，需要验证很多不同类型的 React 组件。结合 jQuery .trigger('custom_event', data) 并在 componentDidMount 中监听该 custom_event，这真是太棒了。

非常聪明的可能解决方案，实施起来有点麻烦，但建议5*。

这不会让你得到子元素；它为您提供了一个闭包，其中包含来自渲染的旧通道的虚拟 dom 节点的过时副本，以及可能已过时的数据集，几乎可以保证具有通量和损坏的上下文。这是非常不正确的。

您能否在您的帖子中添加一个示例来描述您如何实现这一目标？

【参考方案3】：

这是我在 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);

【讨论】：

由于某种原因它不起作用（返回null）。虽然我使用的是带有 react-rails 的 React 15.3.0——也许这就是原因。

这是一个黑客。即使对于黑客来说，它也非常丑陋。这当然不是你可以依赖的。

@AluanHaddad 同意，尽管它对开发过程中的某些调试任务很有帮助。

这将随着fiber 的发布而中断。在像 React 一样频繁更改的库中使用未记录的内部结构可能是不明智的

这里有一个新版本也适用于 Fiber：***.com/a/39165137/2441655