React中三种展开运算符写法在MaterialUI Link中的差异及报错疑问

三种写法的核心差异 #

• 写法1：<Link {...{underline: "hover", style: {...}}}
  直接展开一个临时定义的字面量对象，对象内的underline和style会被直接传递给Link组件，是符合React属性传递规范的写法，组件能正确识别并应用这些属性。

• 写法2：<Link {...{obj}}}
  这里展开的是一个只包含obj属性的新对象，传递给Link的不是obj内部的underline和style，而是一个名为obj的额外属性——这完全不符合Link组件的属性要求，属于无效写法，组件不会处理这个属性。

• 写法3：<Link {...obj}}}
  理论上是直接展开obj常量中的所有属性，和写法1的最终效果应该一致，但你遇到报错，大概率是以下原因：

  1. TypeScript类型不兼容：如果用TypeScript开发，obj的自动推导类型可能和MaterialUI Link的LinkProps不匹配。比如underline的取值没有被明确标记为符合组件要求的字面量类型，或者style属性在当前版本的MaterialUI中已被废弃（v5更推荐用sx替代style）。
  2. 版本差异：不同版本的MaterialUI Link属性定义有变化，比如旧版本中underline的可选值或属性名可能不同。

解决写法3报错的方案 #

• 给obj明确指定类型：

  import { Link, LinkProps } from '@mui/material';
  const obj: LinkProps = { underline: "hover", style: {} };
  

• 或者用as const锁定属性值的类型：

  const obj = { underline: "hover" as const, style: {} };
  

• 若使用MaterialUI v5，建议替换style为sx属性：

  const obj = { underline: "hover" as const, sx: {} };
  

内容的提问来源于stack exchange，提问作者Questioneering