react/forbid-elements 制限
何ができるか
禁止する要素のリストを設定し、置き換えとして望む要素を指定できるようにします。
なぜ問題なのか
特定の要素の使用を他の要素に置き換えるために禁止したい場合があります。たとえば、すべての <div /> を使用しないで、代わりに <Box /> を使うようにするなどです。
例
このルールに対して不正なコードの例：
jsx
// ["error", { "forbid": ["button"] }]
<button />;
React.createElement("button");
// ["error", { "forbid": ["Modal"] }]
<Modal />;
React.createElement(Modal);
// ["error", { "forbid": ["Namespaced.Element"] }]
<Namespaced.Element />;
React.createElement(Namespaced.Element);
// ["error", { "forbid": [{ "element": "button", "message": "use <Button> instead" }, "input"] }]
<div>
<button />
<input />
</div>;
React.createElement("div", {}, React.createElement("button", {}, React.createElement("input")));このルールに対して正しいコードの例：
jsx
// ["error", { "forbid": ["button"] }]
<Button />
// ["error", { "forbid": [{ "element": "button" }] }]
<Button />設定
このルールは以下のプロパティを持つ設定オブジェクトを受け入れます。
forbid
type: array
禁止される要素のリストで、警告表示時に表示するための任意のメッセージも含められます。
例：
["error, { "forbid": ["button"] }]["error, { "forbid": [{ "element": "button", "message": "Use <Button> instead." }] }]["error, { "forbid": [{ "element": "input" }] }]
forbid[n]
type: object | string
禁止される要素で、単純な要素名またはカスタムメッセージ付きで指定できます。
forbid[n].element
type: string
forbid[n].message
type: string
使用方法
設定ファイルや CLI でこのルールを有効化するには、次のように使用できます：
json
{
"plugins": ["react"],
"rules": {
"react/forbid-elements": "error"
}
}bash
oxlint --deny react/forbid-elements --react-plugin