我希望能够弄清楚React组件与某个DOM元素相关联的内容.
例如,假设我有一个div,并且我使用React渲染我的整个应用程序.div必须由React组件呈现 - 但是哪一个?
我知道React提供了方法" getDOMNode "来获取与React组件关联的DOM节点,但我想做相反的事情.
这可能吗?
如果您的情况要求从DOM节点获取react元素,则可以采用以下方法:“通过事件进行通讯并回调”
您应该在DOM元素上触发一个自定义事件,并在React组件中具有该自定义事件的事件监听器。这会将DOM元素映射回反应组件。
没有.
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});