Uma função React pode ser transformada em um componente de classe

Question

Confira a resposta no link a seguir Guilherme Toti.

Como um valor de função pode ser exibido em uma tag HTML com um valor de retorno do clique addEventListerner?

É possível, se eu puder usar "const Keys" como um componente de reação, ou seja: "class Keys extends React.Component".

 const Keys = ({ calcKeys, handleClick }) => (
    <div className="display-keys">
      {calcKeys.map(item => (
           <button onClick={() => handleClick(item.key)}>{item.key}</button>
       ))}
    </div>
)

Answer 1

Você pode , tudo o que você precisa fazer é referenciar os adereços do componente em um rendermétodo:

class Keys extends React.Component {
  render() {
    const { calcKeys, handleClick } = this.props;
    return (
      <div className="display-keys">
        {calcKeys.map(item => (
             <button onClick={() => handleClick(item.key)}>{item.key}</button>
         ))}
      </div>
    );
  }
}

Mas é um pouco estranho querer fazer - torna o código mais longo sem muito motivo, e o próprio React recomenda tentar usar componentes funcionais em um novo código, quando possível.

Answer 2

sim. você certamente pode reescrever como um componente de classe. Mas a tendência é reescrever os componentes da classe em funcionais.

O que pode ser feito como componente de classe também pode ser alcançado pelo tipo funcional. Os componentes funcionais também têm a vantagem de usar ganchos.

dê uma olhada nos ganchos