eslint-plugin-react 中 forbid-component-props 规则的正则表达式支持探讨

背景介绍

在 React 开发中，eslint-plugin-react 是一个广泛使用的 ESLint 插件，它提供了许多针对 React 特定模式的 linting 规则。其中 forbid-component-props 规则用于禁止在组件上使用特定的 props，例如常见的 className 和 style 属性。

问题场景

许多团队使用 forbid-component-props 规则来禁止使用 className 和 style props，以鼓励更可控的样式管理方式。然而，在实际项目中，我们经常会遇到一些特殊情况：

1. 遗留组件：在引入规则前已经存在的组件，它们可能已经使用了这些被禁止的 props
2. 特殊组件：如图标组件（命名模式如 Icon24Something），确实需要允许这些 props 来实现特定的样式覆盖需求

目前，forbid-component-props 规则提供了 allowedFor 和 disallowedFor 选项来允许或禁止特定组件的特定 props，但这些选项只支持精确匹配，不支持模式匹配。

解决方案探讨

正则表达式方案

最初提出的解决方案是添加 allowedForRegex 和 disallowedForRegex 选项，允许开发者使用正则表达式来匹配组件名称。这种方案技术上可行，但存在安全隐患：

1. 正则表达式在配置文件中可能导致安全漏洞（如 ReDoS 攻击）
2. 会增加维护复杂性
3. 可能引发自动化安全扫描工具的误报

替代方案：Glob 模式

经过讨论，更推荐的解决方案是使用 Glob 模式而非正则表达式：

1. 安全性更高，不易引发安全问题
2. 已经在本插件和其他 ESLint 规则中广泛使用
3. 足够满足大多数模式匹配需求

Glob 模式可以轻松实现：

• 前缀匹配：Icon* 匹配所有以 Icon 开头的组件
• 后缀匹配：*Button 匹配所有以 Button 结尾的组件
• 精确匹配：MyComponent 直接匹配特定组件

实现细节

在实际实现中，可以考虑以下方式：

1. 保持现有的 allowedFor 和 disallowedFor 选项，继续支持精确匹配
2. 新增 allowedForPattern 和 disallowedForPattern 选项，支持 Glob 模式
3. 使用现有的 minimatch 依赖（插件已依赖）来处理 Glob 匹配

最佳实践建议

对于需要类似功能的团队，可以考虑以下实践：

1. 对于遗留组件，明确列出所有需要例外的组件名
2. 对于有命名规律的组件系列（如图标组件），使用 Glob