react/forbid-elements Restriction
它的作用
允许你配置一个被禁止元素列表，并指定它们期望替换成的元素。
为什么这很糟糕？
你可能希望禁止使用某些元素，转而使用其他元素，例如： 禁止所有 <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": "使用 <Button> 代替" }, "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
被禁止元素列表，可选地附带用于在 lint 违规中显示的消息。
示例：
["error, { "forbid": ["button"] }]["error, { "forbid": [{ "element": "button", "message": "使用 <Button> 代替。" }] }]["error, { "forbid": [{ "element": "input" }] }]
forbid[n]
type: object | string
一个被禁止的元素，可以是普通元素名称，也可以带有自定义消息。
forbid[n].element
type: string
要禁止的元素名称。
forbid[n].message
type: string
当找到该元素时要显示的消息
如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/forbid-elements": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/forbid-elements": "error",
},
});bash
oxlint --deny react/forbid-elements --react-plugin版本
该规则于 v0.16.11 中添加。