如何解决Lit-html 以 DOM 节点为目标
想象一下,我有一个模板,旁边有一个按钮和一个微调器。当按下按钮时,如何告诉微调器出现?
return `html
<button @click=${handleClick}>Press</button>
<div class="spinner"></div>
`
我希望能够在“handleClick”中定位这个特定的微调器,而不是页面中的其他一些(可能有很多我们不知道)。在 React 中,我们可以使用 refs。
解决方法
这实际上取决于您如何渲染其他微调器以及它们的位置。在您提供的模板中,您可以使用如下绑定(另外,我不知道此微调器如何激活,因此我假设它使用 active
类):
import {render,html} from 'lit-html';
const spinnerActive = false;
const handleClick = () => {
spinnerActive = true;
renderTemplate();
}
const template = html`
<button @click=${handleClick}>Press</button>
<div class="spinner ${spinnerActive ? 'active' : ''}"></div>
`;
const renderTemplate = () => {
render(template,<Host DOM node>);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。