Pesquisa de site

reactjs - Typescript + React/Redux: A propriedade "XXX" não existe no tipo 'IntrinsicAttributes & IntrinsicClassAttributes

Estou trabalhando em um projeto com Typescript, React e Redux (todos rodando no Electron), e encontrei um problema ao incluir um componente baseado em classe dentro de outro e tentar passar parâmetros entre eles. De forma resumida, tenho a seguinte estrutura para o componente contêiner:

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

E o componente filho:

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

Obviamente, estou incluindo apenas o básico e há muito mais em ambas as classes, mas ainda estou recebendo um erro quando tento executar o que me parece ser um código válido. O erro exato que estou recebendo:

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

Quando encontrei o erro pela primeira vez, pensei que era porque eu não estava passando uma interface definindo minhas props, mas eu criei isso (como você pode ver acima) e ainda assim não funciona. Estou me perguntando, há algo que estou perdendo?

Quando eu excluo a prop ChildComponent do código no ContainerComponent, ele renderiza normalmente (além do fato de meu ChildComponent não ter uma prop crítica), mas com ela no JSX, o TypeScript se recusa a compilá-lo. Acho que pode ter algo a ver com o envolvimento do connect baseado neste artigo, mas os problemas naquele artigo ocorreram no arquivo index.tsx e eram um problema com o provider, e eu estou tendo meus problemas em outro lugar.

Resposta #1

Então, depois de ler algumas respostas relacionadas (especificamente esta e esta e olhando para a resposta do @basarat à pergunta), consegui encontrar algo que funciona para mim. Parece (para os meus olhos relativamente novos no React) que o Connect não estava fornecendo uma interface explícita para o componente container, então ele ficou confuso com a prop que estava tentando passar.

Então o componente contêiner permaneceu o mesmo, mas o componente filho mudou um pouco:

interface IChildComponentProps extends React.Props<any> {
  ... (other props needed by component)
}

interface PassedProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps & PassedProps, any> {
  ...
}

....
export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps)    (ChildComponent);

O acima conseguiu funcionar para mim. Passar explicitamente as props que o componente espera do container pareceu funcionar e ambos os componentes foram renderizados corretamente.

NOTA: Eu sei que esta é uma resposta muito simplista e não tenho exatamente certeza de POR QUE isso funciona, então se algum ninja experiente de React quiser compartilhar algum conhecimento sobre esta resposta, eu ficaria feliz em alterá-la.

Resposta #2

O que funcionou para mim foi simplesmente mudar o tipo do componente filho de React.FC para JSX.Element

Antes (aviso)

const Component: React.FC = () => {

Depois (sem aviso)

const Component = (): JSX.Element => {

Artigos relacionados