Reactjs Typescript扩展类以定义属性类名称

我正在应用程序中使用

react bootstrap

按钮

，我想声明扩展

按钮

的类

按钮更改

类，以定义属性

类名

中的值

'btn-loading'

在不使用typescript的情况下，我有以下

React

组件：

export const ButtonPageChange = ({onClick, href, disabled, variant, size, className, children}) => {

    return (
        <Button onClick={onClick}
                href={href}
                disabled={disabled}
                variant={variant}
                size={size}
                className={'btn-loading ' + className ? className : ''}
                data-senna-off="true"
        >
            {children}
        </Button>
    )

};

我是从Typescript开始的，我不知道怎么做。

---

谢谢

我同意你的想法，但是这里的问题是TS和JS之间的共同问题，即使在TS中，你可以使用键入的道具使这更容易理解

，因此不能真正扩展组件（继承）。即使您可以这样做，您也可以使用合成溶液：

interface ButtonPageChange extends ButtonProps {}

function ButtonPageChange(props: ButtonPageChangeProps) { 
  const { className, ...buttonProps } = props; // Object destructuring to pass all props down to `Button`
  return (
    <Button 
      {...buttonProps}  // spread to pass properties to button
      className={'btn-loading ' + className ?? ''} // Null coaleshing operator
      data-senna-off="true"
    />
  );
}

接口ButtonPageChange扩展ButtonProps{}
函数ButtonPageChange（道具：ButtonPageChangeProps）{
const{className，…buttonProps}=props；//对象分解以将所有props向下传递给`Button`
返回(
);
}

interface ButtonPageChange extends ButtonProps {}

function ButtonPageChange(props: ButtonPageChangeProps) { 
  const { className, ...buttonProps } = props; // Object destructuring to pass all props down to `Button`
  return (
    <Button 
      {...buttonProps}  // spread to pass properties to button
      className={'btn-loading ' + className ?? ''} // Null coaleshing operator
      data-senna-off="true"
    />
  );
}