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

我正在为一个应用程序创建一组基本组件，我希望编写尽可能少的定制。而是选择将父对象的属性传递给子对象。我有一堆按钮，定义如下：

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>
    )
};

export const PrimaryButton=（道具）=>{
返回(
{props.children}
)
};

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

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>
    )
};

提交

父级上的类名覆盖组件中提供的类名。我希望他们能一起工作。我已经发现，我可以通过单独声明我想要的道具来做到这一点，如下所示：

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>
    )
};

export const PrimaryButton=（道具）=>{
props.className=props.className+style.primary；
返回(
{props.children}
)
};

因为我不再传播东西了，虽然我现在必须手动声明onClick之类的东西，这看起来很混乱，因为我不知道它将来可能需要有什么事件，我希望它尽可能可重用，而不需要一直更改

用于将

类名

和

子类

与您希望传播的道具分开：

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

export const PrimaryButton=（{className=''，children，…props}）=>(
{儿童}
);

用于将

类名

和

子类

与您希望传播的道具分开：

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

export const PrimaryButton=（{className=''，children，…props}）=>(
{儿童}
);