web-dev-qa-db-fra.com

TS2339: La propriété 'props' n'existe pas sur le type 'Home'

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

reactjstypescript
11
Mukesh Kumar

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.

22
brandNew

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

5
brandNew

Sur le tsconfig.json ensemble de fichiers

"allowSyntheticDefaultImports": true

Exemple:

{
   "compilerOptions": {
     ...
     "allowSyntheticDefaultImports": true
   }
}
0
José Salgado