eslint-plugin-react 规则详解：react/jsx-props-no-spread-multi —— 禁止重复展开同一标识符

开发工具代码质量静态分析【免费下载链接】eslint-plugin-reactReact-specific linting rules for ESLint项目地址https://gitcode.com/gh_mirrors/es/eslint-plugin-react点击查看免费下载 本文是 eslint-plugin-react 插件中react/jsx-props-no-spread-multi规则的完整技术指南覆盖规则动机、判定逻辑、正确与错误示例、何时关闭以及源码级实现原理。读完本文你将掌握如何通过该规则拦截 JSX 中重复展开同一表达式的写法理解其在 props 覆盖语义下的潜在风险并能依据源码与测试用例精准判断规则的行为边界。规则是什么jsx-props-no-spread-multi是 eslint-plugin-react 提供的一条 JSX 属性展开spread约束规则官方定义为Disallow JSX prop spreading the same identifier multiple times禁止在同一个 JSX 元素上多次展开同一个标识符。其核心理念是任何唯一的表达式以标识符识别只允许被展开一次。规则文档明确指出同一个表达式被展开两次通常是错误的信号——因为在两次展开之间夹着的普通属性可能被后一次展开意外覆盖即使没有发生覆盖重复展开也会造成不必要的重复计算。该规则默认处于关闭状态recommended: false属于 Best Practices最佳实践类目需要开发者按需显式开启。规则详情何时报错、何时放行不正确的代码示例以下代码会在{...props}出现第二次时触发报告App {...props} myAttr1 {...props} /问题在于第二个{...props}会覆盖中间myAttr1设置的属性值。当props对象中存在myAttr键时最终渲染结果中myAttr会被第二次展开的值覆盖这几乎肯定不是编写者的本意。正确的代码示例App myAttr1 {...props} / App {...props} myAttr1 /只要同一表达式只展开一次无论普通属性放在展开之前还是之后都被视为合法。判定原则按表达式而非按位置规则关注的是是否展开了同一个表达式而非展开了几次。因此App {...a} {...b} /展开的是两个不同的标识符a与b合法App {...a} {...a} /同一标识符a出现两次非法三次及以上的重复展开会针对每一次重复分别报告错误详见测试用例。结合源码理解判定逻辑规则实现位于 lib/rules/jsx-props-no-spread-multi.js作者为 Simon Schick。其核心逻辑非常精简挂在JSXOpeningElement访问器上create(context) { return { JSXOpeningElement(node) { const spreads node.attributes.filter( (attr) attr.type JSXSpreadAttribute attr.argument.type Identifier ); if (spreads.length 2) { return; } // We detect duplicate expressions by their identifier const identifierNames new Set(); spreads.forEach((spread) { if (identifierNames.has(spread.argument.name)) { report(context, messages.noMultiSpreading, noMultiSpreading, { node: spread, }); } identifierNames.add(spread.argument.name); }); }, }; }从源码结构可以提炼出三个关键实现细节只统计展开节点通过node.attributes.filter(...)过滤出该 JSX 开标签上的所有JSXSpreadAttribute普通属性如myAttr1不参与判断因此它不会影响重复判定只会影响语义层面的覆盖风险。只识别标识符展开attr.argument.type Identifier意味着规则只针对{...props}这种直接展开变量/标识符的写法。如果是复杂表达式例如App {...props.a} {...props.a} /或App {...getProps()} {...getProps()} /其argument分别是 MemberExpression 与 CallExpression不会被该规则识别这一点在文档的 When Not To Use It 中亦隐含对应边界。用 Set 记录已见标识符遍历所有展开节点若当前标识符已在identifierNames集合中则调用report报告noMultiSpreading否则将标识符加入集合。对于App {...props} {...props} {...props} /第二次、第三次展开都会各自触发一次报告。报错消息定义在规则模块的messages常量中messageId 为noMultiSpreadingconst messages { noMultiSpreading: Spreading the same expression multiple times is forbidden, };报告动作经由 lib/util/report.js 的report辅助函数完成该函数会结合 lib/util/message.js 判断 ESLint 版本 4.15时使用 messageId否则退回完整消息文本从而兼容新旧 ESLint。测试用例验证行为边界规则的测试文件位于 tests/lib/rules/jsx-props-no-spread-multi.js使用RuleTester配合parsers.all(...)在默认解析器、babel-eslint、babel/eslint-parser、typescript-eslint 等多套解析器下统一验证解析器矩阵见 tests/helpers/parsers.js。valid合法用例const a {}; App {...a} / const a {}; const b {}; App {...a} {...b} /invalid非法用例const props {}; App {...props} {...props} / // 1 个错误 const props {}; div {...props} aa {...props} / // 1 个错误 const props {}; div {...props} {...props} {...props} / // 2 个错误测试结论清晰印证了规则语义展开不同标识符a、b完全合法相同标识符出现第二次即报错普通属性aa夹在中间并不会改变判定结果仍会报错三次展开会在第二次、第三次分别产生 1 个错误共 2 个错误。规则在插件中的注册与配置规则通过 lib/rules/index.js 统一注册jsx-props-no-spread-multi: require(./jsx-props-no-spread-multi),从 index.js 的配置构建逻辑可以看到该规则不在recommended配置中configs/recommended.js 中未列出但会被纳入all配置configs/all.js 基于全部非废弃规则生成统一设为 error 级别因此开启react/all时该规则会自动生效。如需单独开启可在 ESLint 配置中显式声明{ plugins: [react], rules: { react/jsx-props-no-spread-multi: error } }该规则不接收任何选项参数开启即为使用默认行为。When Not To Use It何时关闭该规则规则文档给出的关闭条件是当同一个表达式重复展开会得到不同结果时。典型场景包括展开的表达式具有副作用每次求值返回不同对象例如App {...getProps()} {...getProps()} /但如前所述这类非标识符表达式本身就不在该规则的检测范围内展开的是随渲染过程动态变化的值开发者有意让后一次展开覆盖前一次项目中存在依赖多次展开同一对象、且明确依赖后者覆盖前者的既有代码模式。在这些情况下关闭该规则react/jsx-props-no-spread-multi: off比强行改写代码更合理。即便规则开启也建议先审视代码意图如果两次展开之间没有夹带任何普通属性那么第二次展开通常是纯粹的冗余应直接删除。小结react/jsx-props-no-spread-multi是一条小而精准的防御性规则它通过识别 JSX 开标签上展开的标识符是否重复拦截同一表达式被多次展开的潜在覆盖误伤与冗余计算。其实现依赖JSXSpreadAttributeIdentifier的 AST 形态过滤与 Set 去重计数行为由 lib/rules/jsx-props-no-spread-multi.js 定义并经 tests/lib/rules/jsx-props-no-spread-multi.js 在多解析器矩阵下验证。对于大多数组件代码而言开启该规则能帮助开发者尽早发现展开覆盖的隐患只有在重复展开确实期望产生不同结果的少数场景下才需要显式关闭。赞分享开发工具代码质量静态分析【免费下载链接】eslint-plugin-reactReact-specific linting rules for ESLint项目地址https://gitcode.com/gh_mirrors/es/eslint-plugin-react点击查看免费下载相关推荐eslint-plugin-react 规则详解react/jsx-no-duplicate-props 禁止 JSX 重复属性eslint plugin react 规则详解react/jsx no duplicate props 禁止 JSX 重复属性 react/jsx no d开发工具代码质量静态分析Apache Arrow C 数据类型系统详解DataType、TypeTraits 与 Visitor 模式实战Apache Arrow C 数据类型系统详解DataType、TypeTraits 与 Visitor 模式实战 导读 本文是 Apache Arrow开发工具代码质量静态分析Taro 小程序端为何禁用 JSX 对象展开符eslint-plugin-taro 的 no-spread-in-props 规则全解析Taro 小程序端为何禁用 JSX 对象展开符eslint plugin taro 的 no spread in props 规则全解析 微信小程序的组件模型前端跨平台小程序移动开发开发工具上一篇深蓝词库转换工具快速上手3步搞定30输入法格式互通下一篇泰拉瑞亚模组加载器完全指南5分钟掌握游戏扩展技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考