virtual-dom

Question

使用 virtual-dom library, how can I get hold of the real DOM element corresponding to a virtual one? The use case is I need to manipulate the DOM via the spin.js 库时。

相应地，在 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(),
  })
}

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

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

javascript

html

dom

spin.js