Question

我正在为应用程序创建一堆基本组件，我想写尽可能少的自定义。而是选择将父级的属性传递给子级。我有一堆这样定义的按钮：

export const PrimaryButton = (props) => {
    return (
        <button className={style.primary} {...props}>{props.children}</button>
    )
};

但是，当我这样做时，如果按如下所示声明按钮：

<PrimaryButton className="someClass">Submit</PrimaryButton>

父级上的类名将覆盖组件中提供的类名。我想让他们一起工作。我发现我可以这样声明自己想要的道具来做到这一点：

export const PrimaryButton = (props) => {
    props.className = props.className + style.primary;
    return (
        <button className={style.primary + props.className}>{props.children}</button>
    )
};

由于我不再散布事物，尽管现在我必须手动声明类似onClick的内容，这似乎很混乱，因为我不知道将来可能需要发生什么事件，我希望它成为尽可能重复使用，而无需一直进行更改。

Answer 1

使用destructuring with rest将className和children与您想要传播的道具分开：

export const PrimaryButton = ({ className = '', children, ...props }) => (
  <button className={`${style.primary} ${className}`} {...props}> 
  {children}
  </button>
);

有没有一种方法可以在不覆盖指定属性的情况下在组件上分布道具？

1 个答案: