1
resposta

Property 'children' does not exist on type 'Readonly<{}>

import React from 'react'; import style from './Botao.module.scss';

class Botao extends React.Component <{}>{ render() { return ( ) } }

export default Botao;

1 resposta

Oi Arnaldo, tudo bem?

Desculpe a demora em retornar.

O erro que você está enfrentando ("Property 'children' does not exist on type 'Readonly<{}>'") ocorre porque a propriedade "children" que você está tentando acessar em seu componente Botao não é reconhecida pelo TypeScript.

Isso ocorre porque a propriedade "children" é uma propriedade implícita do React que não é explicitamente definida em sua classe Botao. O TypeScript não pode reconhecê-la a menos que seja explicitamente definida em sua classe Botao.

Para resolver esse problema, você pode adicionar a propriedade "children" à interface genérica da sua classe Botao. Ficaria assim:

interface Props {
  children: React.ReactNode;
}

class Botao extends React.Component<Props> {
  render() {
    return (
      {this.props.children}
    )
  }
}

Desta forma, o TypeScript reconhecerá a propriedade "children" e o erro desaparecerá.

Outra alternativa é usar a interface "React.PropsWithChildren", que inclui a propriedade "children" em uma interface genérica. Ficaria assim:

class Botao extends React.Component<React.PropsWithChildren<{}>> {
  render() {
    return (
      {this.props.children}
    )
  }
}

Espero que isso tenha sido útil para você.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software