Typescript扩展类以定义属性className

Question

我在应用程序中使用react-bootstrap Button，并希望声明扩展Button的ButtonPageChange类，以在属性className中定义值'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>
    )

};

您可以看到，我必须将所有的props传递给Button组件。我想使用Typescript来使这个ButtonPageChange更加整洁。这不是一个语法正确的代码，但给你一个想法：

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

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

Answer 1

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

继承，所以你不能真的继承一个组件( 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"
    />
  );
}