noRestrictedElements

JSX and TSX

摘要

¥Summary

规则生效日期：v2.0.0

¥Rule available since: v2.0.0
诊断类别：lint/correctness/noRestrictedElements

¥Diagnostic Category: lint/correctness/noRestrictedElements
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
来源：

¥Sources:
- 与 react/forbid-elements 相同
  
  ¥Same as react/forbid-elements

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noRestrictedElements": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

禁止使用已配置的元素。

¥Disallow the use of configured elements.

此规则禁止使用已配置的元素。如果没有配置任何元素，此规则将不会执行任何操作。

¥This rule disallows the use of configured elements. Without elements configured, this rule doesn’t do anything.

此规则适用于需要强制使用特定组件而非某些 HTML 或自定义元素的情况。例如，在 React 项目中，你可能希望确保开发者使用自定义的 TextField 组件而不是原生的 <input> 元素，以保持一致性并应用自定义样式或行为。

¥This rule is useful in situations where you want to enforce the use of specific components instead of certain HTML or custom elements. For example, in a React project, you might want to ensure that developers use a custom TextField component instead of the native <input> element to maintain consistency and apply custom styling or behavior.

以下是一些此规则适用的场景：

¥Here are some scenarios where this rule can be beneficial:

一致性：确保所有输入字段都使用自定义组件而不是原生元素，以保持应用外观的一致性。

¥Consistency: Ensuring that all input fields use a custom component instead of the native element to maintain a consistent look and feel across the application.
可访问性：强制使用内置辅助功能功能的自定义组件，确保所有用户都能访问应用。

¥Accessibility: Enforcing the use of custom components that have built-in accessibility features, ensuring that the application is accessible to all users.
自定义行为：要求使用封装特定业务逻辑或验证的组件，以降低出错风险并提高代码可维护性。

¥Custom Behavior: Requiring the use of components that encapsulate specific business logic or validation, reducing the risk of errors and improving code maintainability.
样式：通过使用应用一致样式的自定义组件，确保所有元素都符合设计系统。

¥Styling: Ensuring that all elements adhere to the design system by using custom components that apply consistent styling.

通过禁止某些元素并强制使用自定义组件，此规则有助于维护代码库的质量和一致性。

¥By disallowing certain elements and enforcing the use of custom components, this rule helps maintain code quality and consistency across the codebase.

选项

¥Options

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noRestrictedElements": {
6
          "options": {
7
            "elements": {
8
              "input": "input is not allowed, use TextField component instead",
9
              "CustomComponent": "deprecated"
10
            }
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

示例

¥Examples

无效

¥Invalid

限制 HTML 元素的使用：

¥Restricting the use of HTML elements:

1
<input />

code-block.jsx:1:1 lint/correctness/noRestrictedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ input is not allowed, use TextField component instead
  
  > 1 │ <input />
      │ ^^^^^^^^^
    2 │

限制自定义组件的使用：

¥Restricting the use of custom components:

1
<CustomComponent />

code-block.jsx:1:1 lint/correctness/noRestrictedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ deprecated
  
  > 1 │ <CustomComponent />
      │ ^^^^^^^^^^^^^^^^^^^
    2 │

有效

¥Valid

1
<TextField />

noRestrictedElements

摘要

如何配置

描述

选项

示例

无效

有效

相关链接