Расширение класса Typescript для определения свойства className - PullRequest
Новая
       2

Расширение класса Typescript для определения свойства className

0 голосов
/ 25 апреля 2020

Я использую 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 и понятия не имею, как это сделать. Спасибо

1 Ответ

1 голос
/ 26 апреля 2020

Я следую вашей идее, однако проблема здесь разделяется между 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"
    />
  );
}
...