JSX Attributes

classList

编辑此页面

Solid 提供了两种设置元素类名的方式:class 和 classList 属性。

首先,你可以像设置其他属性一样设置 class=...。例如:

// 两个静态类名
<div class="active editing" />
// 一个动态类名,如果不需要则删除 class 属性
<div class={state.active ? 'active' : undefined} />
// 两个动态类名
<div class={`${state.active ? 'active' : ''} ${state.currentId === row.id ? 'editing' : ''}`} />

另外,classList 伪属性允许你指定一个对象,其中每个键是一个类名,值是一个布尔值,表示是否包含该类名。例如(与上一个示例相匹配):

<div
classList={{ active: state.active, editing: state.currentId === row.id }}
/>

这个示例编译后会生成一个渲染效果,当对应的布尔值发生变化时,动态调用 element.classList.toggle 来打开或关闭每个类名。例如,当 state.active 变为 true [false] 时,元素会添加 [移除] active 类。

传入 classList 的值可以是任何表达式(包括信号获取器),只要它能求值为一个合适的对象。一些例子:

// 动态类名和值
;<div classList={{ [className()]: classOn() }} />
// 信号类名列表
const [classes, setClasses] = createSignal({})
setClasses((c) => ({ ...c, active: true }))
;<div classList={classes()} />

同时使用 class 和 classList 也是可能的,但这是危险的。主要的安全情况是当 class 被设置为静态字符串(或什么都不设置),而 classList 是响应式的。(class 也可以设置为静态计算值,如 class={baseClass()},但这种情况下它应该出现在任何 classList 伪属性之前。)如果 class 和 classList 都是响应式的,可能会出现意外行为:当 class 值改变时,Solid 会设置整个 class 属性,因此会覆盖 classList 所做的任何切换。

因为 classList 是一个编译时伪属性,所以它在类似 <div {...props} /> 的属性展开或 <Dynamic> 中不起作用。

报告此页面问题