Typescript: TSX: Não é possível usar um componente armazenado em uma variável

Criado em 12 jan. 2016 · 3Comentários · Fonte: microsoft/TypeScript

Repro

Suponha que eu tenha um componente chamado MyComponent .

Usar MyComponent assim funciona:

render() {
  return <MyComponent />;
}

mas armazenar MyComponent em uma variável e tentar usá-la não:

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

Isso resulta no seguinte erro:

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

Gambiarra

Em vez de usar TSX, use React.createElement :

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

By Design

Fonte

rigdern

👍1

Comentários muito úteis

anAlias é um elemento JSX intrínseco, pois começa com uma letra minúscula . Os elementos intrínsecos são pesquisados na interface JSX.IntrinsicElements e, no seu caso, presumivelmente não tem o membro anAlias . Tente torná-lo maiúsculo para que seja tratado como um elemento baseado em

vladima em 12 jan. 2016

👍5

Todos 3 comentários

vladima em 12 jan. 2016

👍5

Vlad cobriu - este é o mesmo comportamento que você veria com o transformador JSX regular (identificadores de minúsculas são tratados da mesma forma que div ou span )

RyanCavanaugh em 12 jan. 2016

Obrigado. Eu não estava ciente da distinção entre elementos intrínsecos e baseados em valores e não sabia que a caixa da primeira letra era significativa.

rigdern em 12 jan. 2016

Esta página foi útil?

0 / 5 - 0 avaliações