reactjs - vida - La clase extiende React. El componente no puede usar getInitialState en React

react getderivedstatefromprops

Question

Estoy cortando la sintaxis de ES6 en React, y escribo los componentes como:

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

pero el navegador me arroja una advertencia sobre:

Advertencia: getInitialState se definió en Loginform, una clase simple de JavaScript. Esto solo es compatible con las clases creadas con React.createClass. ¿Querías definir una propiedad estatal en su lugar?

Puedo manejarlo con la sintaxis tradicional var Loginform = React.createClass pero ¿cuál es la sintaxis correcta de ES6?

Otra pequeña cosa, creo que en la sintaxis tradicional React.createClass es un objeto, por lo que las funciones están separadas por comas, pero con la clase extends requiere punto y coma, no lo entiendo bien.

Answer 1

Ejemplo de ES6: estado, 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,
};

Answer 2

No necesita punto y coma ni comas entre las declaraciones de método de clase ES6.

Para las clases ES6, getInitialState ha quedado en desuso a favor de declarar un objeto de estado inicial en el constructor:

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

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

Answer 3

Si usamos el campo de clase, siguiente está funcionando.

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

Esto se puede usar en lugar de

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

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