Question

HyperX是一个模块，可将标记的模板文字转换为hyperscript函数，例如virtual-dom中包含的函数。

Snabbdom使用类似超文本的函数来构建它的vdoms，但它的第二个参数是不同的。不是属性，它的属性被各种＆＃34 ;;＆＃34 ;;

使用

h('div', {
  props: {title: someString}, // snabbdom/modules/props
  classes: {selected: isSelected}, // snabbdom/modules/class
  on: {click: doSomething}, // snabbdom/modules/eventlisteners
  style: {color: someColor} // snabbdom/modules/style
}, ['children']);

是否可以将hyperx与snabbdom的超文本功能一起使用，如下所示：

const h = require('snabbdom/h');
const hyperx = require('hyperx');
const hx = hyperx(h);

let vdom = hx`
  <div 
    title=${someString} 
    class-selected={isSelected} 
    on-click={doSomething} 
    style={({color: someColor})}
  >
   children
  </div>
`;

Answer 1

是的，你可以！

var snabbdom = require('snabbdom')
var patch = snabbdom.init([ // Init patch function with chosen modules
  require('snabbdom/modules/class'), // makes it easy to toggle classes
  require('snabbdom/modules/props'), // for setting properties on DOM elements
  require('snabbdom/modules/style') // handles styling on elements with support for animations  
])
var h = require('snabbdom/h')
var hyperx = require('hyperx')
var hx = hyperx(h)

var title = 'world'
var wow = [1,2,3]
var tree = hx`<div>
  <h1 y="ab${1+2}cd">hello ${title}!</h1>
  ${hx`<i>cool</i>`}
  wow
  ${wow.map(function (w, i) {
    return hx`<b>${w}</b>\n`
  })}
</div>` 
patch(document.body, tree)

检查工作代码here

我可以在Snabbdom中使用HyperX吗？

1 个答案: