我正在制作一个使用TypeScript的应用程序,并且使用Svelte作为模板语言。
这使我能够创建带有类的DOM元素,这些类可以根据变量实时更改,这要归功于三元运算符。
<div class="{theme == "dark" ? "bg-black" : "bg-white"}"> Hello </div>
问题是,我的应用程序必须动态地生成一些DOM元素,这就需要我使用下面的脚本创建一些div
:
const parentDiv = document.getElementById("parentDiv");
const childDiv = document.createElement("div")
childDiv.classList.add(theme == "dark" ? "bg-black" : "bg-white")
parentDiv.appendChild(childDiv)
在这种情况下,条件运算符只在调用.add()
时计算,只发生一次,不像上面第一种方法那样“实时计算”值,如何处理?
1条答案
按热度按时间lymnna711#
如果你没有通过简单的Svelte标记创建元素,你可能做错了什么。有很多指令可以帮助你,例如
{#if}
和{#each}
。在某些情况下,强制添加内容是有意义的,但即使这样,您也应该添加 components 而不是普通的DOM元素。
组件内部的任何东西都可以使用自动更新的Svelte机制。如果你需要从外部获得响应,你可以将一个存储作为属性传递,或者从内部导入一个全局存储/从上下文加载它。
(建议将主题设置为商店。全局或通过 prop /上下文传递。)
有关客户端API上下文的注意事项:它们必须显式传递;要继承现有上下文,可以使用
getAllContexts
: