web-dev-qa-db-fra.com

La propriété TypeScript 'props' n'existe pas

J'ai ce fichier .tsx

import React, { Component } from 'react';

export class SidebarItem extends Component {
    constructor (props) {
        super(props);
    }

    render () {
        return (<li>{this.props.children}</li>);
    }
}

Cependant, TypeScript lève cette erreur: error TS2339: Property 'props' does not exist on type 'SidebarItem'.

typescriptreact-jsx
6
Knight Yoshi

La solution consiste à installer les définitions de React Types

yarn add -DE @types/react

Plus de détails à partir de TypeScript docs et de types repo

Sur une note de côté, je devais redémarrer vscode pour que la peluche se déclenche correctement.

7
stilllife

TypeScript suit la spécification du module ES mais React suit CommonJS. Cet article aborde entre autres choses .

L'importation de React comme ceci résoudra ce problème:

import * as React from 'react';

export class SidebarItem extends React.Component {
    constructor (props) {
        super(props);
    }

    render () {
        return (<li>{this.props.children}</li>);
    }
}
3
Jaap

Vous pouvez essayer la manière suivante d’écrire un React Comp.

interface SidebarItemProps
{
    children: any
} 

class SidebarItem extends React.Component<SidebarItemProps, any> { 
    //your class methods 
}

En savoir plus sur l'utilisation de React dans TypeScript

3
SteveKitakis

Si votre composant n'a pas d'état, vous n'avez pas du tout besoin d'utiliser une classe. Vous pouvez également utiliser un composant de réaction sans état (SFC) comme réponse pour cette question .

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <li>{props.children}</li>;

Ou si votre marge devient énorme:

const MyStatelessComponent : React.StatelessComponent<{}> = props => {

    return <li>{props.children}</li>;

}
0
Leone