是否可以在虚拟 DOM 上获取事件目标的父节点?
在我的基本反应组件中,我有一个从 onClick 事件触发的方法,我想获取父虚拟 DOM 节点属性。
handleClick(e){
// The following code only gives me the actual DOM parent Node
ReactDOM.findDOMNode(e.target).parentNode
}
是否可以在虚拟 DOM 上获取事件目标的父节点?
在我的基本反应组件中,我有一个从 onClick 事件触发的方法,我想获取父虚拟 DOM 节点属性。
handleClick(e){
// The following code only gives me the actual DOM parent Node
ReactDOM.findDOMNode(e.target).parentNode
}
是的。React 在虚拟 DOM 模型上工作,并且仅在需要时才会更新真实的浏览器 DOM。React 中的事件也适用于虚拟 DOM,它们被称为合成事件。如果您发现由于某种原因需要底层浏览器级别的事件,只需使用 nativeEvent 属性即可。
你可以从这里阅读 React Virtual DOM 中的一些限制:
此外,这可能会有所帮助,并解释了 Virtual Dom 和 Browser DOM 之间的区别。
浏览器 DOM 只是页面元素的抽象,而 React DOM 将是该抽象的抽象。
的render
方法ReactDOM
对于我们如何将 React 元素发送到 Browser DOM 至关重要:
var React = require('react');
var ReactDOM = require('react-dom');
var root = React.createElement('div');
ReactDOM.render(root, document.getElementById('example'));
^
|---- Where React elements from React Virtual DOM enter the Browser DOM
在 React 中,我们正在处理 React 元素和 React 组件。
由于 React Element 是 DOM 元素的虚拟表示,因此要处理事件并捕获父级,您需要通过以下三种方式之一创建 React 组件:
例如,要在 click 事件中导航父级,您可以检查:
var parent = this._reactInternalInstance._currentElement._owner._instance;
REF:有什么方法可以访问 React 中的父组件实例?和http://jsfiddle.net/BinaryMuse/j8uaq85e/