Question

此代码无效。

const render = ({title, tag, values}) => {
    bind(document.body)`
        <h1>${title}</h1>
        <div>
            <${tag} data=${values}></${tag}>
        </div>
    `
}

render({title: "test", tag: "custom-elem1", values: {foo: "bar"}})

我可以使用hyperHTML动态更改标签吗？

Answer 1

您可能不喜欢答案，但是不，您不能。

原因是 hyperHTML 与任何其他类似的库一样，不适用于字符串，它适用于DOM，并且在DOM世界中，即使您尝试使用，也无法更改标签名称。

var div = document.createElement('div');
div.tagName = 'P';
console.log(div.tagName); // "DIV"

相反，您可以做的是返回您喜欢的元素。

const render = ({title, tag, values}) => {
  const ref = document.body;
  bind(ref)`
    <h1>${title}</h1>
    <div>${(() => {
      switch tag:
        case 'custom-elem1':
          return wire(ref)`<custom-elem1 data=${values} />`;
        case 'custom-elem2':
          return wire(ref)`<custom-elem2 data=${values} />`;
        case 'custom-elem3':
          return wire(ref)`<custom-elem3 data=${values} />`;
      })()
    }</div>`;
};

在这种情况下，您可以做任何想做的事情，只要您不尝试动态更改DOM标签的性质，因为即使 hyperHTML 也无法做到这一点

如何在hyperHTML中动态更改标签

1 个答案: