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

Question

使用 virtual-dom 时库，我怎样才能获得与虚拟 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

我发现我可以通过在有问题的虚拟节点上注册一个钩子(Hook)来解决这个问题，这是 virtual-dom 的一个小记录功能。 AFAICT。一旦渲染后，就会使用真实的 DOM 节点调用该钩子(Hook)。

virtual-dom 对于它的钩子(Hook)非常具体，它们需要是在其原型(prototype)上具有 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(),
  })
}