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

参照