styled-components向自定义组件传递props值及报错解决

核心问题说明 #

.attrs() 本身就是 styled-components 提供的、用于给组件绑定默认/固定属性、props的正确API，你的使用思路没有问题，出现props传递失败、; expected 语法报错都是因为写法不符合JavaScript语法规则：

• 箭头函数直接返回对象时，必须用圆括号包裹对象字面量，否则JS引擎会把对象的大括号解析为函数代码块的起始标记，触发语法解析错误
• JS对象字面量中，带连字符-的键名（比如data-test-id）必须用引号包裹，否则引擎会把连字符识别为减法运算符，直接报错
• 不管是字符串类型的props还是布尔类型的props，在返回的对象中都要写成标准的键值对格式，不能直接写属性名或者用JSX式的赋值写法

修正后代码 #

const StyledCard = styled(Card).attrs(() => ({
  size: "none",
  disableCardClick: true,
  "data-test-id": "wc-ftu-redesign-card"
}))`
  height: 100%;
  max-width: 927px;

  @media (min-width: 810px) {
    max-width: 529px;
  }

  @media (max-width: 810px) {
    max-height: 600px;
  }

  @media (max-width: 650px) {
    max-height: 750px;
  }

  @media (max-width: 550px) {
    overflow-y: scroll;
  }
`;

补充说明 #

• 上述写法会完全固定size、disableCardClick、data-test-id三个属性的值，外部使用StyledCard时传入同名props不会覆盖内置值，符合内置固定属性的需求
• 如果后续需要改成「内置默认值、允许外部传入覆盖」的逻辑，只需要把attrs的入参改成接收外部props，合并后返回即可：

  .attrs((props) => ({
    size: "none",
    disableCardClick: true,
    "data-test-id": "wc-ftu-redesign-card",
    ...props
  }))
  

  注意要把...props放在后面，才能让外部传入的值覆盖默认值。

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