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(),
  })
}

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

1 个答案: