如何通过对象向组件传递大量元素属性集合？

当然有超简便的方法解决这个问题！借助JavaScript的扩展运算符（...），你可以轻松批量设置自定义元素的属性，再也不用手动逐个定义啦。

两种常见场景的实现方式 #

场景1：直接将属性对象作为组件props传递 #

如果你可以直接把属性对象展开传给组件，而不是嵌套在data属性里，代码会更简洁：

传递属性的地方：

const myAttrs = { one: "one", two: "two", fifty: "fifty" };
// 直接展开myAttrs作为组件的props
return <MyElement {...myAttrs}>Some label</MyElement>;

styled-components组件定义：

const MyElement = styled.a.attrs(props => ({
  // 用扩展运算符批量展开所有props到元素属性中
  ...props,
}))`
  /* 你的CSS样式代码 */
  color: #333;
  text-decoration: none;
`;

场景2：属性对象嵌套在data属性中（对应你的示例） #

如果必须保持data={myAttrs}的传递方式，只需要在attrs里展开props.data即可：

传递属性的地方（保持你的原有写法）：

const myAttrs = { one: "one", two: "two", fifty: "fifty" };
return <MyElement data={myAttrs}>Some label</MyElement>;

styled-components组件定义：

const MyElement = styled.a.attrs(props => ({
  // 展开props.data里的所有键值对，批量设置属性
  ...props.data,
}))`
  /* 你的CSS样式代码 */
`;

进阶：处理默认属性与属性覆盖 #

如果你的组件需要设置一些默认属性，同时允许传入的属性覆盖默认值，只需要调整顺序即可（后面的扩展会覆盖前面的默认值）：

const MyElement = styled.a.attrs(props => ({
  // 设置默认属性
  href: "#default-link",
  target: "_self",
  // 展开传入的属性，会覆盖同名的默认属性
  ...props.data,
}))`
  /* 你的CSS样式代码 */
`;

这样一来，当myAttrs里包含href时，就会替换掉默认的#default-link，非常灵活！

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