useQwikClasslist
¥Summary
-
规则生效日期：
v2.1.4¥Rule available since:
v2.1.4 -
诊断类别：
lint/correctness/useQwikClasslist¥Diagnostic Category:
lint/correctness/useQwikClasslist -
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 error。
¥The default severity of this rule is error.
-
此规则属于以下域：
¥This rule belongs to the following domains:
-
来源：
¥Sources:
-
¥Same as
qwik/prefer-classlist
-
¥How to configure
{ "linter": { "rules": { "correctness": { "useQwikClasslist": "error" } } }}¥Description
建议使用 class 属性作为类列表，而不是 classnames 辅助函数。
¥Prefer using the class prop as a classlist over the classnames helper.
此规则鼓励使用原生支持字符串、对象和数组的 class 属性，从而实现细粒度的响应式和最佳性能。使用像 classnames 这样的工具可能会干扰 Qwik 的响应式模型，并阻止框架优化组件更新。建议使用内置的 class 属性以获得最佳效果。
¥This rule encourages the use of class prop which natively supports strings, objects, and arrays, enabling fine-grained reactivity and optimal performance. Using utilities like classnames can interfere with Qwik’s reactivity model and prevent the framework from optimizing component updates. Prefer using the built-in class prop for best results.
更多信息，请参阅：Qwik 类绑定文档
¥For more information, see: Qwik documentation on class bindings
¥Examples
¥Invalid
<div class={classnames({ active: true, disabled: false })} />code-block.jsx:1:6 lint/correctness/useQwikClasslist ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid third-party classnames utilities with Qwik components
> 1 │ <div class={classnames({ active: true, disabled: false })} />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Qwik’s built-in class prop handles:
- Conditional classes via objects: class={{ active: isActive }}
- Dynamic string concatenation
- Array combinations
External utilities break Qwik’s:
- Fine-grained reactivity tracking
- Resumability optimizations
ℹ Use native Qwik class binding as shown in Qwik Rendering: Class Bindings (Official Docs).
¥Valid
<div class={{ active: true, disabled: false }} />¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号