web-dev-qa-db-fra.com

Comment définir l'état initial avec l'utilisation de la classe ES6 dans React?

J'ai créé la classe ci-dessous

class App extends Component{
     render() {
         return (
             <div className="app"></div>
         );
     }
}

Comment définir l'état initial?
getInitialState() ne fonctionne pas? Qu'est-ce que je fais mal?
Les documents React ne sont pas non plus utiles.

reactjsstate
9
John Anisere
import React, { Component } from 'react';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: 'Hello World'
        };
    }
    render() {
        return (
            <div>
                {this.state.text}
            </div>
        );
    }
}

Vous pouvez également consulter cet article sur la différence entre quand utiliser un constructeur et quand utiliser getInitialState.

Quelle est la différence entre l'utilisation du constructeur et getInitialState dans React/React Native?

14
Jenna Rajani

Il y a aussi un raccourci de l'excellente réponse de Jenna, qui n'utilise pas constructor ou this:

class App extends Component {
    state = {
        text: 'Hello World'
    };

    render() {
        return (
            <div>
                {this.state.text}
            </div>
        );
    }
}

Un exemple simplifié montre que la sortie est la même dans les deux cas:

Mais si nous étendons une classe parente, la sortie transpilée diffère, car le nombre d'arguments dans le constructeur est inconnu.

24
joeytwiddle