在Element.classList.add()中使用条件运算符

Question

我正在制作一个使用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()时计算条件运算符，这只会发生一次。没有"实时计算"。类似于上面第一个方法中的值。我该如何处理呢?

Answer 1

如果您没有通过纯svg标记创建元素，那么您可能做错了什么。有各种指令可以帮助，例如{#if}和{#each}。

在某些情况下，命令式地添加东西是有意义的，但即使这样，您也应该添加组件而不是普通的DOM元素。你可以使用客户端API实例化任何组件，例如

new MyComponent({ target: document.body })

组件内的任何内容都可以使用自动更新的Svelte机制。如果你需要从外部获得响应性，你可以将store作为属性传递，或者从内部导入全局store/从上下文加载它。

(建议将主题设置为商店。全局传递或通过props/context传递)

---

关于客户端API上下文的注意:它们必须显式传递;要继承现有的上下文，可以使用getAllContexts:

// somewhere at top-level
const context = getAllContexts();
// ...
new MyComponent({ ..., context })