1

Quero transformar a seguinte classe em uma função:

class Basic extends Component<Props, State> 

A minha dúvida é: como passo as propriedades props e state para a função?

5
  • 1
    você está usando typescript?
    – novic
    Commented 16/05/2020 às 0:06
  • sim, porém não entendo quase nada
    – krolgon
    Commented 16/05/2020 às 0:11
  • 1
    O estado em componentes funcionais não está atrelado à instância da função, portanto não há porquê para tipar o estado na função, como é feito nas classes. Tente editar a sua pergunta para adicionar mais informações? Commented 16/05/2020 às 0:11
  • @LuizFelipe indiretamente sim ...eu posso tipar o estado.
    – novic
    Commented 16/05/2020 às 0:12
  • @VirgilioNovic, sim, você pode tipar o estado, mas o tipo do estado não está atrelado à instância da função (assim como está para as classes)... Commented 16/05/2020 às 0:13

1 Resposta 1

2

Tipando props

Como props são passadas como o primeiro parâmetro para componentes funcionais pelo React, basta colocar os devidos tipos para o primeiro parâmetro. Geralmente, cria-se uma interface para isso:

import React from 'react';

interface Props {
  name: string;
  age: number;
}

export function UserCard(props: Props) {
  return <>{/* ... */}</>;
}

Você também pode utilizar o tipo React.FC, exportado pelo React:

import React from 'react';

interface Props {
  name: string;
  age: number;
}

export const UserCard: React.FC<Props> = (props) => {
  return <>{/* ... */}</>;
};

No entanto, por preferência pessoal, prefiro não usar arrow functions para esse tipo de coisa. Conforme pode ser verificado nesta resposta, componentes com declarações de funções têm algumas vantagens se comparados a arrow functions.


Tipando state

Como o estado em componentes funcionais é alcançado através dos React Hooks, você não adiciona os tipos do estado diretamente na função do componente, mas nas próprias chamadas dos ganchos. Na maioria das vezes, isso é feito com genéricos.

Geralmente, os ganchos da API do React inferem automaticamente o tipo do estado através do primeiro argumento. Veja como passar um tipo explícito para um useState, por exemplo:

import React, { useState } from 'react';

export function MyComponent() {
  const [bool, setBool] = useState<boolean>(false);

  setBool(true); // ok
  setBool('foo'); // Argument of type '"foo"' is not assignable to parameter of type 'SetStateAction<boolean>'.

  return <code>{bool.toString()}</code>
}

Veja o exemplo acima no TypeScript playground.

Atualmente, não consta na documentação do React a explicação de como usar esses genéricos. No entanto, você pode verificar as definições de tipo do React no GitHub.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .