Estou trabalhando com um projeto legado JavaScript que usa a estrutura React. Temos lá algum componente React definido que eu gostaria de reutilizar em um projeto TypeScript React totalmente diferente.
O componente JS React é definido no arquivo controls.jsx e tem a seguinte aparência:
export class MyComponent extends React.Component {
render() {
return <h1>Hi from MyComponent! Message provided: {this.props.message}</h1>;
}
}
No meu projeto TypeScript React, estou tentando usá-lo assim:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MyComponent } from "../JavaScriptProject/controls";
ReactDOM.render(
<MyComponent message="some nice message"/>,
document.getElementById("documents-tree")
);
mas estou recebendo o seguinte erro:
As mensagens de erro dizem:
O tipo de elemento JSX 'MyComponent' não é uma função construtora para elementos JSX. O tipo 'MyComponent' não possui as seguintes propriedades do tipo 'ElementClass': context, setState, forceUpdate, props e 2 more.ts (2605) A classe de elemento JSX não suporta atributos porque não possui uma propriedade 'props'. (2607)
Eu já tentei a solução com o arquivo de digitações personalizadas descrito nesta pergunta, mas isso não muda nada.
Eu entendo que o componente JS tem algumas propriedades de tipo forte exigidas pelo TypeScript ausentes, mas no meu tsconfig.json tenho o allowJs definido como true :
{
"compilerOptions": {
"allowJs": true,
"baseUrl": ".",
"experimentalDecorators": true,
"jsx": "react",
"noEmitOnError": true,
"outDir": "lib",
"sourceMap": true,
"target": "es5",
"lib": [
"es2015",
"dom"
]
},
"exclude": [
"node_modules",
"dist",
"lib",
"lib-amd"
]
}
então eu esperava que funcionasse ...
Obrigado pela ajuda