我正在制作一个使用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：