Klasse erweitert React.Component kann getInitialState in React nicht verwenden

77

Ich überprüfe die ES6-Syntax in React und schreibe die Komponenten wie folgt:

export default class Loginform extends React.Component {
    getInitialState() {
        return {
          name: '',
          password: ''
        };
    };
}

aber der Browser wirft mir eine Warnung vor:

Warnung: getInitialState wurde in Loginform definiert, einer einfachen JavaScript-Klasse. Dies wird nur für Klassen unterstützt, die mit React.createClass erstellt wurden. Wollten Sie stattdessen eine Staatseigenschaft definieren?

Ich kann mit der traditionellen Syntax umgehen, var Loginform = React.createClassaber was ist die richtige ES6-Syntax?

Eine andere Kleinigkeit, denke ich, ist in der traditionellen Syntax React.createClassein Objekt, daher sind die Funktionen darin durch Komma getrennt, aber mit der extendsKlasse, für die ein Semikolon erforderlich ist, verstehe ich es nicht gut.

reactjs Ziegel Yang
quelle
Mögliches Duplikat von Warum wird getInitialState nicht für meine React-Klasse aufgerufen?
Felix Kling
@ FelixKling sicher. Entschuldigung
Brick Yang

Antworten:

150

Sie benötigen keine Semikolons oder Kommas zwischen ES6-Klassenmethodendeklarationen.

Wurde für ES6-Klassen getInitialStatezugunsten der Deklaration eines Anfangszustandsobjekts im Konstruktor veraltet:

export default class Loginform extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      name: '',
      password: ''
    };
  };
}
max
quelle
Mit diesem, wenn console.log(this.state.name), wirft es einen Fehler überCannot read property 'state' of null
Brick Yang
4
Wo versuchst du es zu nennen? In ES6 werden Klassen thisnicht automatisch gebunden, was Teil des Problems sein könnte: facebook.github.io/react/blog/2015/01/27/…
max
2
Zitat aus dem verlinkten Artikel: " Eine der Besonderheiten der React- createClassFunktionalität war, dass Ihre Methoden automatisch an eine Komponenteninstanz gebunden wurden. Dies bedeutete beispielsweise, dass innerhalb eines Klicks ein Rückruf thisan die Komponente gebunden wurde. Mit der Umstellung auf ES6-Klassen Das React-Team empfiehlt, die Bindung im Konstruktor vorzubinden
Con Antonakos
1
Ich mochte es irgendwie so wie es mit ES5 war - und getInitialState ()
Alexander Mills
7

ES6-Beispiel: state, defaultProps, propTypes

import React from 'react'
import ReactDom from 'react-dom';
export default class Item extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            check:false,
        };
        this.click=this.click.bind(this);
    }
    click(){
       this.setState({check:true});
    }
    render(){
        const text=this.state.check?'yes':'no';
        return(<div onClick={this.click}>{this.props.name} : <b>{text}</b></div>)
    }

}

Item.defaultProps={
    comment:"default comment",
};
Item.propTypes={
    name:React.PropTypes.string.isRequired,
};
Juan Carlos Constantine
quelle
1

Wenn wir ein Klassenfeld verwenden, funktioniert Folgendes.

state = {
      name: '',
      password: ''
}

Dies kann anstelle von verwendet werden 

constructor(props, context) {
    super(props, context);

    this.state = {
      name: '',
      password: ''
    };
  };
lingjin.w
quelle