javascript - virtual-dom - 如何获取真实的 DOM 元素以便与 spin.js 集成？

Question

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

相应地，在 React 中，您将调用React.findDOMNode以获取要传递给 spin.js 的元素。

示例代码：

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

Answer 1

我发现我可以通过在有问题的虚拟节点上注册一个钩子来解决这个问题，这是virtual-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(),
  })
}