1
votes

React.HTMLProps casse defaultProps

J'avais le code suivant pour les PropTypes de mon composant de style bouton

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

Cela fonctionnait bien, mais je voulais ensuite inclure les props HTMLButtonElement pour fournir de l'interactivité à mon bouton. Par conséquent, j'ai ajouté ceci:

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

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

Cependant, ce changement fait que defaultProps se plaint. C'est l'erreur que j'obtiens.

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

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

Cependant, si j'enlève le React.HTMLProps, cela fonctionne, mais ce n'est pas ce que je veux. Quelqu'un connaît-il une solution pour cela?

Merci d'avance.

reactjs react-props styled-components react-proptypes

0 commentaires

3 Réponses :

2
votes

Je pense qu'il faut définir une nouvelle interface:

size?: number;

Le problème est que React.HTMLProps ou plutôt, sa super-interface HTMLAttributes code > contient déjà un attribut size défini comme:

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

Par conséquent, vous devrez renommer votre propriété.

2 commentaires

J'ai cette erreur Le type '"petit"' n'est pas attribuable au type 'nombre | undefined'.ts (2430). ... il semble que je ne puisse pas remplacer la taille de l'accessoire

@Neill Réponse mise à jour. Vous avez une collision avec un attribut HTML existant.

0
votes

Alors essayez-les en regardant le site 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> { }

C'est peut-être le moyen le plus simple de résoudre votre problème, bien que il y en a d'autres qui pourraient vous aider si ce n'est pas le cas.

1 commentaires

J'utilise des composants stylisés

1
votes

J'ai également trouvé que le simple fait d'étendre React.HTMLProps ne fonctionne pas si vous souhaitez définir une valeur personnalisée pour size prop. Voici une solution à ce problème. Nous allons avoir besoin petit assistant appelé Omit du package utility-types ( https://github.com/piotrwitek/utility-types#omitt-k )

Et utilisez-le comme ceci:

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
};

p >

0 commentaires