web-dev-qa-db-fra.com

Utilisation de state in react avec TypeScript

Je suis nouveau sur TypeScript. J'ai un problème avec l'affichage de this.state.something dans la méthode de rendu ou l'affectation à une variable à l'intérieur d'une fonction.

Jetez un œil au morceau de code le plus important:

interface State {
    playOrPause?: string;
}

class Player extends React.Component {
    constructor() {
        super();

        this.state = {
            playOrPause: 'Play'
        };
    }

    render() {
        return(
            <div>
                <button
                    ref={playPause => this.playPause = playPause}
                    title={this.state.playOrPause} // in this line I get an error
                    >
                    Play
                </button>
           </div>
        );
    }
}

L'erreur indique: "[ts] La propriété 'playOrPause' n'existe pas sur le type 'ReadOnly <{}>'.

J'ai essayé de déclarer la propriété playOrPause comme un type de chaîne et cela n'a pas fonctionné. Qu'est-ce que je manque ici pour le faire fonctionner?

javascriptreactjstypescript
13
Maciej S.

Vous devez déclarer que votre composant utilise l'interface State, utilisée par les génériques de TypeScript.

interface IState {
    playOrPause?: string;
}

interface IProps {}
class Player extends React.Component<IProps, IState> {
// --------------------------------------------^
    constructor() {
        super();

        this.state = {
            playOrPause: 'Play'
        };
    }

    render() {
        return(
            <div>
                <button
                    ref={playPause => this.playPause = playPause}
                    title={this.state.playOrPause} // in this line I get an error
                    >
                    Play
                </button>
           </div>
        );
    }
}
23
felixmosh