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' : ''}`} />
Info:
注意,在 Solid 1.4 中 className
已被废弃,推荐使用
class
。
另外,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>
中不起作用。