web-dev-qa-db-fra.com

Extension des éléments HTML dans React et TypeScript tout en préservant les accessoires

Je ne peux tout simplement pas comprendre ce que je suppose, j'ai essayé probablement une demi-douzaine de fois et j'ai toujours recours à any... Existe-t-il un moyen légitime de commencer avec un élément HTML, enveloppez-le dans un composant, et envelopper cela dans un autre composant de telle sorte que les accessoires HTML traversent tout? Personnaliser essentiellement l'élément HTML? Par exemple, quelque chose comme:

interface MyButtonProps extends React.HTMLProps<HTMLButtonElement> {}
class MyButton extends React.Component<MyButtonProps, {}> {
    render() {
        return <button/>;
    }
} 

interface MyAwesomeButtonProps extends MyButtonProps {}
class MyAwesomeButton extends React.Component<MyAwesomeButtonProps, {}> {
    render() {
        return <MyButton/>;
    }
}

Usage:

<MyAwesomeButton onClick={...}/>

Chaque fois que j'essaie ce type de composition, j'obtiens une erreur similaire à:

La propriété 'ref' de foo n'est pas assignable à la propriété cible.

reactjstypescripttsx
28
Josh

Vous pouvez changer la définition de votre composant pour autoriser les accessoires du bouton réagir HTML

class MyButton extends React.Component<MyButtonProps & React.HTMLProps<HTMLButtonElement>, {}> {
    render() {
        return <button {...this.props}/>;
    }
}

Cela indiquera au compilateur TypeScript que vous souhaitez entrer les accessoires de bouton avec 'MyButtonProps'

30
Jordan Upham

Il semble que la réponse ci-dessus soit obsolète. La solution de @AlexM fonctionne.

Dans mon cas, j'encapsule un composant stylisé avec un composant fonctionnel, mais je souhaite toujours exposer les propriétés normales des boutons HTML.

export const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>> = ({ children, icon, ...props}) => ( 
  <StyledButton { ...props}>
     { icon && (<i className = "material-icons" >{icon}< /i>)} 
     {children} 
   </StyledButton>);
0
EimerReis