[英]virtual-dom - how to get hold of real DOM element in order to integrate with spin.js?
When using the virtual-dom library, how can I get hold of the real DOM element corresponding to a virtual one? 使用virtual-dom库时,如何获得与虚拟对应的真实DOM元素? The use case is I need to manipulate the DOM via the spin.js library. 用例是我需要通过spin.js库来操作DOM。
Correspondingly, in React you would call React.findDOMNode in order to get hold of the element to pass to spin.js. 相应地,在React中,您将调用React.findDOMNode以便获得传递给spin.js的元素。
Example code: 示例代码:
let el = h('#spinner')
# TODO: Pass real DOM element, not virtual, but how?
new Spinner().spin(el)
I found I could solve this by registering a hook on the virtual node in question, a little documented feature of virtual-dom AFAICT. 我发现我可以通过在有问题的虚拟节点上注册一个钩子来解决此问题,这是虚拟域 AFAICT的一些文献记载功能。 The hook gets called with the real DOM node once it's rendered. 钩子在渲染后立即通过真正的DOM节点调用。
virtual-dom is very specific about its hooks, they need to be objects with hook
and unhook
functions on their prototypes (can't be direct properties). virtual-dom的钩子非常具体,它们必须是在原型上具有hook
unhook
hook
功能的对象(不能是直接属性)。
let h = require('mercury').h
// Hook to get hold of real DOM node
let Hook = () => {}
Hook.prototype.hook = (node) => {
// Do what thou wilst with the node here
}
Hook.prototype.unhook = () => {}
// Mercury component
let Component = () => {
}
Component.render = (state) => {
// Create virtual node with hook
return h('div', {
hook: new Hook(),
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.