virtual-dom——如何获得真正的DOM元素，以便与spin.js集成

virtual-dom - how to get hold of real DOM element in order to integrate with spin.js?

本文关键字：js 集成 spin DOM 何获得 virtual-dom 元素      更新时间：2023-09-26

使用虚拟DOM库时，如何获取虚拟DOM元素对应的真实DOM元素?用例是我需要通过spin.js库来操作DOM。

相应地，在React中你会调用React。

示例代码:

let el = h('#spinner')
# TODO: Pass real DOM element, not virtual, but how?
new Spinner().spin(el)

我发现可以通过在有问题的虚拟节点上注册一个钩子来解决这个问题，这是虚拟dom AFAICT的一个小特性。一旦渲染完成，钩子就会被真正的DOM节点调用。

virtual-dom对于钩子是非常具体的，它们需要是在原型上具有hook和unhook函数的对象(不能是直接属性)。

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(),
  })
}
相关文章：