web-dev-qa-db-fra.com

Confusion dans Typescript React.FC <Props>

J'apprends TypeScript et certains éléments me déroutent. Un peu est ci-dessous:

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>{props.name}</p>
    </div>
  )
}


const PrintName2 = (props:Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>{props.name}</p>
    </div>
  )
}

Pour les deux composants fonctionnels ci-dessus, je vois que TypeScript génère le même code JS. Le PrintName2 composant me semble plus simple en ce qui concerne la lisibilité. Je me demande quelle est la différence entre les deux définitions et est-ce que quelqu'un utilise le deuxième type de composants de réaction.

javascriptreactjstypescriptfrontend
10
Kuldeep Bora

React.FC n'est pas la meilleure façon de taper un composant React, il y a un lien .

J'utilise personnellement ce type:

const Component1 = ({ prop1, prop2 }): JSX.Element => { /*...*/ }

Liste courte de React.FC les inconvénients:

  1. Fournit une définition implicite des enfants. Même si votre composant n'a pas besoin d'avoir un enfant, cela peut provoquer une erreur.
  2. Ne prend pas en charge les génériques.
  3. Ne fonctionne pas correctement avec defaultProps.
3
Alexander Kim

Puisque vous utilisez React et TypeScript, vous devez toujours utiliser le premier modèle, car cela garantira que votre composant est typé plus strictement car cela implique que le PrintName sera de type React Functional Component, et il prend des accessoires de type Props.

const PrintName: React.FC<Props>

Vous pouvez lire la définition complète de l'interface pour les composants fonctionnels sur les React typages TypeScript référentiel .

Le deuxième exemple que vous avez fourni ne fournit aucune forme de typage, sauf qu'il s'agit d'une fonction qui prend un ensemble de paramètres de type Props, et qu'elle peut renvoyer n'importe quoi en général.

Par conséquent, écrire

const PrintName2 = (props:Props)

est semblable à

const PrintName2: JSX.Element = (props:Props)

car TypeScript est définitivement incapable de déduire automatiquement qu'il s'agit d'un composant fonctionnel.

2
wentjun