Was ist diese JavaScript ES6 Syntax?

Question

Learning Reaktion, und ich bin auf der Suche über MaterialUI docs Google, und es zeigt eine Syntax, die wie folgt aussieht:

export default class DialogExampleModal extends React.Component { 
    state = { 
    open: false, 
    }; 

    handleOpen =() => { 
    this.setState({open: true}); 
    }; 
... 

Babel mit es2015 auf dem state = Teil dieser Code Fehler:

ERROR in ./client/App.jsx 
Module build failed: SyntaxError: Unexpected token (23:8) 

    21 | } 
    22 | 
> 23 | state = { 
    |  ^
    24 |  open: false, 
    25 | }; 
    26 | 

Meine Frage ist, was ist diese Syntax und habe ich etwas möglicherweise falsch konfiguriert? Es scheint, dass andere ES2015-Syntax gut funktioniert.

Answer 1

Ich glaube, Sie müssen entweder einstellen Klasse Eigenschaften innerhalb des Konstruktors wie folgt aus:

export default class DialogExampleModal extends React.Component { 

    constructor() { 
    this.state = { 
     open: false, 
    }; 

    this.handleOpen =() => { 
     this.setState({open: true}); 
    }; 
    } 

} 

oder können Sie transform-class-properties babel-Plugin verwenden, Code aus Ihrer Frage Kompilierung zu machen.

Answer 2

Nun, die erste Sache, die zu mir springt, ist, dass der Beispielcode eine offene geschweifte Klammer hat, bevor der Zustandscode und Ihre hat eine schließende Klammer.

export default class DialogExampleModal extends React.Component { // HERE 
    state = { // HERE 
    open: false, 
    }; 

    handleOpen =() => { 
    this.setState({open: true}); 
    }; 

und Ihre Unterstützung:

21 | } // HERE 
    22 | 
> 23 | state = { 

Wenn Sie die Komponente vor der Zustandsfunktion schließen, wird es einen Fehler aus, weil es sich um eine nicht definierte Funktion ist, wird sie nicht außerhalb der Komponente zu erwarten.

Wenn das eine andere Funktion innerhalb der Komponente ist, benötigen Sie ein Semikolon danach.

21 | }; // SEMICOLON HERE 
    22 | 
> 23 | state = {