web-dev-qa-db-fra.com

Utilisation d'un composant Forwardref avec des enfants dans Typecript

Utilisation de @ Types/React 16.8.2 et Typescript 3.3.1.

J'ai soulevé cet exemple vers l'avant de la Documentation REACT et ajouté des paramètres de type couple:

const FancyButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef<HTMLButtonElement>();
<FancyButton ref={ref}>Click me!</FancyButton>;

Je reçois l'erreur suivante dans la dernière ligne sous FancyButton:

Taper '{ children: string; ref: RefObject<HTMLButtonElement>; } 'n'est pas assignable à taper' IntrinsicAttributes & RefAttributes<HTMLButtonElement> '. Propriété 'children' n'existe pas sur le type 'IntrinsicAttributes & RefAttributes<HTMLButtonElement> '. TS (2322)

Il semblerait que la définition de type pour React.ForwardRef est fausse de la valeur de retour. Si je fais <FancyButton> Auto-fermeture, l'erreur disparaît. Le manque de résultats de recherche pour cette erreur me conduit à croire que je manque quelque chose d'évident.

reactjstypescriptjsxtsx
31
trevorsg

La réponse donnée par Amarcruz fonctionne bien. Toutefois, si vous devez également passer des accessoires personnalisées au FancyButton, voici comment cela peut être fait.

interface FancyButtonProps extends React.ComponentPropsWithoutRef<'button'> {
    fooBar?: string; // my custom prop
}

const FancyButton = React.forwardRef<HTMLButtonElement, FancyButtonProps>((props, ref) => (
    <button type="button" ref={ref} className="FancyButton">
        {props.children}
        {props.fooBar}
    </button>
));


/// Use later

// You can now get a ref directly to the DOM button:
const ref = React.createRef<HTMLButtonElement>()

<FancyButton ref={ref} fooBar="someValue">Click me!</FancyButton>

Il suffit d'ajouter ici pour la fin.

0
euvs