0

Estou tendo problemas ao declarar {this.props.children}, por algum motivo está dando erro quando tento declarar em uma class React.Component.

import style from "./square.module.scss";
import React from "react";

class Square extends React.Component {
  render(){
    return (
      <button className={style.square} onClick={() => console.log('Foi Clicado')}>
        {this.props.children}
      </button>);
  }
}

export default Square;

o Erro Apresentado é

[{ "owner": "typescript", "code": "2339", "message": "Property 'children' does not exist on type 'Readonly<{}>'.", "source": "ts",

1
  • eu costumo usar react com functional components.. ficaria +- assim ` interface Props { children: ReactNode; } function Square ({children}: Props) { return ( <button className={style.square} onClick={() => console.log('Foi Clicado')}> {children} </button>); }` 9/02 às 21:33

3 Respostas 3

1

Precisa declarar o tipo na props da seguinte forma:

interface IProps {
 children: React.ReactChild;
}

e na classe declarar assim:

class Square extends React.Component<IProps> {

para demonstrar o tipo especifico. Nesse props pode contar outras propriedades e seus respectivos tipos, em especifico só foi declarado children que é do tipo React.ReactChild

Existe também a declaração geral com any, particularmente não é a melhor abordagem porque não traz as vantagens de utilizar os tipos fortes.

0

React.ReactNode deve ser usado ao invés de React.ReactChild que foi descontinuado.

O componente deve ter o seguinte esqueleto em TypeScript:

import React from "react";

interface IProps {
  children: React.ReactNode;
}

interface IState {}

export default class Scroll extends React.Component<IProps, IState> {
  render() {
    return this.props.children;
  }
}

0

Alguma versão do react passou a não inferir mais esse tipo sozinho. Duas soluções: class Square extends React.Component<{children?: ReactNode}> ou class Square extends React.Component<React.PropsWithChildren>. Se tiver mais props pode só incluir no objeto literal no primeiro formato, ou no segundo fazer tipo <React.PropsWithChildren<{minhaProp: string/*, ...*/}>>

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 .