javascript - 将 unsafeHTML 与 lit-element 一起使用时出错

Question

这是我的代码:

import {customElement, LitElement, html, property, css} from 'lit-element';
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';

@customElement('my-component')
export class myComponent extends LitElement {
  render() {
    const markup = '<div>Some HTML to render.</div>';
    return html`
      ${unsafeHTML(markup)}
    `;
  }
}

但是当我在浏览器上运行时，我收到如下错误:

part => { if (!(part instanceof NodePart)) { throw new Error('unsafeHTML can only be used in text bindings'); } const previousValue = previousValues.get(part); if (previousValue !== undefined && isPrimitive(value) && value === previousValue.value && part.value === previousValue.fragment) { return; } const template = document.createElement('template'); template.innerHTML = value; // innerHTML casts to string internally const fragment = document.importNode(template.content, true); part.setValue(fragment); previousValues.set(part, { value, fragment }); }

enter image description here

我的代码很简单，但我仍然遇到错误，所以有人可以向我建议如何使其工作。

Answer 1

此类error通常是由于同一项目中多个版本的 lit-html 交互造成的。一种常见的情况是，当您开始使用 LitElement(内部使用 lit-html 的一个版本)，然后单独安装 lit-html 来能够使用内置指令。这有时会导致重复，可以通过运行轻松修复

$ npm dedupe

此外，对于 yarn 用户:

$ yarn install --flat

在这种情况下可以提供帮助。