React.HTMLProps <HTMLButtonElement>ломает defaultProps

Question

У меня был следующий код для PropTypes моего компонента в стиле кнопки

export type Props = {
  size?: 'small' | 'medium' | 'large',
};

StyledButton.defaultProps = {
  size: 'medium',
};

Он работал нормально, но затем я хотел включить реквизиты HTMLButtonElement для обеспечения интерактивности моей кнопки.Поэтому я добавил это:

export type Props = React.HTMLProps<HTMLButtonElement> & {
  size?: 'small' | 'medium' | 'large',
};

StyledButton.defaultProps = {
  size: 'medium',
};

Однако это изменение вызывает жалобу defaultProps.Это ошибка, которую я получаю.

Types of property 'size' are incompatible.
    Type 'string' is not assignable to type 'undefined'.ts(2322)

Однако, если я заберу React.HTMLProps, это сработает, но это не то, что я хочу.Кто-нибудь знает решение для этого?

Заранее спасибо.

Answer 1

Так что попробуйте, как я посмотрел на сайте https://medium.com/@martin_hotell/react-typescript-and-defaultprops-dilemma-ca7f81c661c7

type Props = Partial<DefaultProps>;

type DefaultProps = Readonly<typeof defaultProps>;

const defaultProps = {
  size: 'small' as 'small' | 'medium' | 'large';
};

export YourClass extends React.Component<Props> { }

Это, пожалуй, самый простой и простой способ решения вашей проблемы, хотя есть и другие, которые могут помочь, если это не поможет.«т.

Answer 2

Я также обнаружил, что простое расширение React.HTMLProps<HTMLButtonElement> не работает, если вы хотите установить пользовательское значение для size prop.Вот решение этой проблемы.Нам понадобится маленький помощник по имени Omit из пакета utility-types (https://github.com/piotrwitek/utility-types#omitt-k)

) И используйте его так:

import { Omit } from 'utility-types';

type BaseButtonProps = Omit<React.HTMLProps<HTMLButtonElement>, 'size'>;

interface ButtonProps {
  size?: 'lg' | 'sm';
}

const Button: React.FC<ButtonProps & BaseButtonProps> = ({ size }) => {
  // size is now 'lg', 'sm' or undefined
};

Answer 3

Я думаю, что вы должны определить новый интерфейс:

export interface Props extends React.HTMLProps<HTMLButtonElement> {
  size?: 'small' | 'medium' | 'large',
};

Проблема в том, что React.HTMLProps или, скорее, его суперинтерфейс HTMLAttributes уже содержит атрибут size, определенный как:

size?: number;

Поэтому вам придется переименовать вашу собственность.