Typescript: TSX : impossible d'utiliser un composant stocké dans une variable

Créé le 12 janv. 2016 · 3Commentaires · Source: microsoft/TypeScript

Repro

Supposons que j'ai un composant appelé MyComponent .

Utiliser MyComponent comme ceci fonctionne :

render() {
  return <MyComponent />;
}

mais stocker MyComponent dans une variable puis essayer de l'utiliser ne fait pas :

render() {
  var anAlias = MyComponent;
  return <anAlias />;
}

Il en résulte l'erreur suivante :

error TS2339: Property 'anAlias' does not exist on type 'JSX.IntrinsicElements'.

solution de contournement

Au lieu d'utiliser TSX, utilisez React.createElement :

render() {
  var anAlias = MyComponent;
  return React.createElement(anAlias);
}

By Design

Source

rigdern

👍1

Commentaire le plus utile

anAlias est un élément JSX intrinsèque puisqu'il commence par une lettre minuscule . Les éléments intrinsèques sont recherchés sur l'interface JSX.IntrinsicElements et dans votre cas, il n'a probablement pas de membre anAlias . Essayez de le mettre en majuscule afin qu'il soit traité comme un élément basé sur la valeur .

vladima le 12 janv. 2016

👍5

Tous les 3 commentaires

vladima le 12 janv. 2016

👍5

Vlad l'a couvert - c'est le même comportement que vous verriez avec le transformateur JSX standard (les identifiants en minuscules sont traités de la même manière que div ou span )

RyanCavanaugh le 12 janv. 2016

Merci. Je n'étais pas au courant de la distinction entre éléments intrinsèques et éléments de valeur et je ne savais pas que la casse de la première lettre était significative.

rigdern le 12 janv. 2016

Cette page vous a été utile?

0 / 5 - 0 notes