0

我正在使用Lit构建我的前端 UI 组件。我还使用了定义自己的 Web 组件的公司内部设计系统。我的问题是，当用户点击其上的“关闭”按钮时，这些内部 Web 组件之一可以直接从 DOM 中删除自己。Lit 不知道发生了这种情况，如果我重新渲染我的组件，它就不起作用。有没有办法以某种方式手动向 Lit 指示真实 DOM 已更改并同步其缓存？

例如，这是我的 LitElement Web 组件的渲染方法的简化版本：

render(): TemplateResult {
  return html`
    <div ... >
      <div ... >
        <internal-component ... >
        </internal-component>
      </div>
    </div>
  `;
}

“内部组件”做自己的事情并呈现一个“关闭”按钮，当单击该按钮时，会直接将其自身从 DOM 中的父元素中移除。它确实会发出一个发生这种情况的事件，但如果我调用“requestUpdate”重新渲染，Lit 不会重新渲染内部组件。如果有一个 Lit API 我可以在关闭事件期间调用“将缓存与实际 DOM 同步”，那么它可能会起作用。

提前致谢！

- 史蒂夫

4

1 回答 1

0

您应该将内部组件的呈现与反应性属性或状态联系起来

@state()
isInternalComponentVisible:boolean = true

render(): TemplateResult {
  return html`
    <div ... >
      <div ... >
        ${this.isInternalComponentVisible ? 
          html`<internal-component @onClose=${() => {this.isInternalComponentVisible = false } } ... >
        </internal-component>` : html``}
        
      </div>
    </div>
  `;
}

然后您可以稍后将状态设置为 true 再次渲染内部组件： this.isInternalComponentVisible = true

即使组件自行移除，这也有助于 lit 与 dom 同步

于 2022-01-26T07:01:56.983 回答