J'ai un programme très basique de réaction avec tsx, je reçois une erreur dont je ne suis pas capable de comprendre pourquoi
import React from 'react';
// import {connect} from 'react-redux'
export class Home extends React.Component {
render(){
console.log(this.props)
return (
<div>Working</div>
)
}
}
import * as React from 'react'
import * as ReactDOM from 'react-dom';
import {Home} from './Components/Home.component'
class App extends React.Component<any,any>{
render(){
return(
<Home value="abc" />
)
}
}
ReactDOM.render( <App />, window.document.getElementById("app"))
git clone this pour le code
Après avoir descendu votre référentiel et l’avoir inspecté, j’ai réalisé que vous n’avez pas réagissez à des typings pour TypeScript.
La saisie est le moyen simple de gérer et d’installer les définitions TypeScript.
Ajout de cette ligne
"@types/react": "^16.0.25" // or what ever other version you prefer
au package.json
et l'exécution de npm i
une fois de plus ont résolu le problème. Essayez-le et laissez-moi savoir si cela résout votre problème :)
PS: TypeScript nécessite que vous décriviez la forme de vos objets et de vos données. Si vous examinez la autre réponse que j’ai fournie précédemment, c’était plutôt une version longue et compliquée de . Vous devez spécifier un type décrivant vos accessoires et le transmettre au composant en question.
TypeScript doit connaître la forme des props
et state
transmises à un composant. Si vous voulez vraiment empêcher TypeScript d'imposer des typages dans votre composant (ce qui annule l'objectif d'utiliser TypeScript), le composant qui a besoin d'accéder à la props
ou à la state
qui lui est transmise doit spécifier le type ou la forme parler, comme any
. C'est-à-dire que votre composant ressemblera à quelque chose comme ça
React.Component<any, any>
au lieu de simplement React.Component
, , ce qui est également une méthode incorrecte d’extension d’une classe si celle-ci attend props
et state
.
Transmettre any
type pour props
et state
signifie que le composant en question doit accepter tout type de forme (type) pour props
et state
.
Essaye ça
import * as React from "react";
import * as ReactDOM from 'react-dom';
export class Home extends React.Component<any, any> {
render() {
console.log(this.props)
return (
<div>Working</div>
)
}
}
class App extends React.Component{
render() {
return (
<Home value="abc" />
)
}
}
ReactDOM.render(<App />, document.getElementById("app"));
et tout devrait fonctionner comme prévu parce que vous avez éliminé TypeScript de la vérification de type pour vous.
Vous pouvez aussi voir la démo ici
Si vous souhaitez réellement appliquer la forme (type) de props
et/ou state
, vous devrez alors définir ces formes avec, généralement, une annotation interface
ou inline type . Voici un exemple du même code ci-dessus qui applique la forme des accessoires à l'aide de la méthode précédente:
import * as React from "react";
import { render } from "react-dom";
interface Props {
value:string,
name:string
}
export default class Home extends React.Component<Props>{
render() {
console.log(this.props)
return (
<div>Working. The props values are: {this.props.value} {this.props.name}</div>
)
}
}
class App extends React.Component {
render() {
return (
<Home value="abc" name="def"/>
)
}
}
render(<App />, document.getElementById("root"));
Maintenant, ici, vous ne pourrez jamais ajouter d’autre prop
au composant Home
qui ne soit pas défini dans l’interface Props
..... Par exemple, procédez comme suit:
<Home value="abc" name="DEF" somethin="else"/>
ne compilerait pas car somethin
n'est pas défini dans la interface
utilisée par le composant Home
.
Pour appliquer la forme de la variable state
, vous devez faire la même chose que pour la variable props
, c.-à-d. Définir un contrat (interface) . De plus, notez que vous devez toujours accéder à votre props
via this
NOT Props
car juste une définition de type de la structure non titulaire des valeurs elles-mêmes.
Vous pouvez voir la démo de cette alternative ici
Sur le tsconfig.json ensemble de fichiers
"allowSyntheticDefaultImports": true
Exemple:
{
"compilerOptions": {
...
"allowSyntheticDefaultImports": true
}
}