Skip to content
← Back to rules

react/forbid-dom-props 限制

它的作用

此规则禁止向元素传递属性。该规则仅适用于 DOM 节点(例如 <div />),不适用于组件(例如 <Component />)。可以通过 forbid 选项自定义禁止的属性列表。

为什么这是不好的?

此规则检查所有 JSX 元素,并验证在 DOM 节点上是否未使用任何禁止的属性。该规则默认处于关闭状态。

示例

以下为 错误 的代码示例:

jsx
// [1, { "forbid": ["id"] }]
<div id='Joe' />

// [1, { "forbid": ["style"] }]
<div style={{color: 'red'}} />

以下为 正确 的代码示例:

jsx
// [1, { "forbid": ["id"] }]
<Hello id='foo' />

// [1, { "forbid": ["id"] }]
<Hello id={{color: 'red'}} />

配置

forbid-dom-props 规则的配置。

该规则接受一个包含以下属性的配置对象:

forbid

type: array

一个在 DOM 元素上被禁止的属性名称或对象的数组。

数组中的每个元素可以是属性名称的字符串,也可以是包含 propName、可选的 disallowedFor(DOM 节点名称数组)以及可选的自定义 message 的对象。

示例:

  • ["error", { "forbid": ["id", "style"] }]
  • ["error", { "forbid": [{ "propName": "className", "message": "请使用 class 代替" }] }]
  • ["error", { "forbid": [{ "propName": "style", "disallowedFor": ["div", "span"] }] }]

forbid[n]

type: string

被禁止的属性,可以是纯属性名字符串,也可以带有选项。

如何使用

要通过配置文件或 CLI 启用 此规则,可以使用:

json
{
  "plugins": ["react"],
  "rules": {
    "react/forbid-dom-props": "error"
  }
}
bash
oxlint --deny react/forbid-dom-props --react-plugin

参考资料