Typescript扩展类以定义属性className

Question

[我在应用程序中使用react-bootstrap Button，并且我想声明扩展了ButtonPageChange的类Button类，以在属性'btn-loading'中定义值className。

不使用打字稿，我有以下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>
    )

};

您如何看到我必须将所有props传递给Button组件。我想使用Typescript来使此ButtonPageChange更干净。这不是语法正确的代码，但可以给您一个提示：

declare class ButtonPageChange extends Button {
    className: {'btn-loading ' + props.className},
    data-senna-off: "true"
}

我从Typescript开始，我不知道如何执行此操作。谢谢

Answer 1

我遵循您的想法，但是这里的问题在TS和JS之间是共同的，即使在TS中您可以使用类型化的道具使之更易于遵循。

React is based on composition，因此您实际上无法extend一个组件（继承）。即使可以做到，也可以使用合成解决方案：

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