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