noUnknownAttribute
¥Summary
-
规则生效日期：
v2.3.3¥Rule available since:
v2.3.3 -
诊断类别：
lint/nursery/noUnknownAttribute¥Diagnostic Category:
lint/nursery/noUnknownAttribute -
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 information。
¥The default severity of this rule is information.
-
此规则属于以下域：
¥This rule belongs to the following domains:
-
来源：
¥Sources:
-
与
react/no-unknown-property相同¥Same as
react/no-unknown-property
-
¥How to configure
{ "linter": { "rules": { "nursery": { "noUnknownAttribute": "error" } } }}¥Description
禁止使用未知的 DOM 属性。
¥Disallow unknown DOM properties.
在 JSX 中，大多数 DOM 属性和特性应该使用驼峰命名法，以符合标准的 JavaScript 风格。如果你习惯编写纯 HTML，这可能会导致错误。只有 data-* 和 aria-* 属性才允许在 JSX 中使用连字符和小写字母。
¥In JSX, most DOM properties and attributes should be camelCased to be consistent with standard JavaScript style.
This can be a possible source of error if you are used to writing plain HTML.
Only data-* and aria-* attributes are allowed to use hyphens and lowercase letters in JSX.
¥Examples
¥Invalid
<div allowTransparency="true" />code-block.jsx:1:6 lint/nursery/noUnknownAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ The property ‘allowTransparency’ is not a valid DOM attribute.
> 1 │ <div allowTransparency=“true” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ This property is not recognized as a valid HTML/DOM attribute or React prop.
ℹ Check the spelling or consider using a valid data-* attribute for custom properties.
<div onclick={() => {}} />code-block.jsx:1:6 lint/nursery/noUnknownAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Property ‘onclick’ is not a valid React prop name.
> 1 │ <div onclick={() => {}} />
│ ^^^^^^^^^^^^^^^^^^
2 │
ℹ React uses camelCased props, while HTML uses kebab-cased attributes.
ℹ Use ‘onClick’ instead of ‘onclick’ for React components.
<div for="bar" />code-block.jsx:1:6 lint/nursery/noUnknownAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Property ‘for’ is not a valid React prop name.
> 1 │ <div for=“bar” />
│ ^^^^^^^^^
2 │
ℹ React uses camelCased props, while HTML uses kebab-cased attributes.
ℹ Use ‘htmlFor’ instead of ‘for’ for React components.
¥Valid
<div className="foo" /><div onClick={() => {}} /><div htmlFor="bar" /><div data-foo="bar" /><div aria-label="Close" />¥Options
ignore
Section titled “ignore”验证过程中要忽略的属性和特性名称数组。
¥An array of property and attribute names to ignore during validation.
{ "noUnknownAttribute": { "options": { "ignore": ["custom-attribute", "non-standard-prop"] } }}¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号