← Back to rules

react/forbid-elements 限制

它的作用

允许你配置一个被禁止元素的列表，并指定它们期望的替代方案。

为什么这是不好的？

你可能希望禁止使用某些元素，而改用其他元素，例如： 禁止所有 <div />，改用 <Box />。

示例

此规则的 错误 代码示例：

// ["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")));

此规则的 正确 代码示例：

// ["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 启用 此规则，可以使用：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/forbid-elements": "error"
  }
}

CLI

oxlint --deny react/forbid-elements --react-plugin

参考资料

• 规则源码