Клас розширює React.Component не може використовувати getInitialState у React


77

Я обробляю синтаксис ES6 у React і пишу такі компоненти:

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

але браузер підказує мені:

Попередження: getInitialState було визначено в Loginform, звичайному класі JavaScript. Це підтримується лише для класів, створених за допомогою React.createClass. Ви хотіли натомість визначити державне майно?

Я можу впоратись із традиційним синтаксисом, var Loginform = React.createClassале який правильний синтаксис ES6?

Ще одна дрібниця, я думаю, що в традиційному синтаксисі React.createClassце об’єкт, тому функції в ньому розділяються комами, але з extendsкласом, який вимагає крапки з комою, я це погано розумію.



@FelixKling впевнений. вибачте
Brick Yang

Відповіді:


150

Вам не потрібні крапки з комою або коми між оголошеннями методів класу ES6.

Для класів ES6 getInitialStateзастаріло на користь оголошення початкового об'єкта стану в конструкторі:

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

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

При цьому, коли console.log(this.state.name), він видає помилку проCannot read property 'state' of null
Brick Yang

4
Де ви намагаєтесь це зателефонувати? У ES6 класи thisне пов'язані автоматично, що може бути частиною проблеми: facebook.github.io/react/blog/2015/01/27/…
більше

2
Цитування зі зв’язаної статті: " Однією з приємностей createClassфункціоналу React було те, що вона автоматично прив’язує ваші методи до екземпляра компонента. Наприклад, це означало, що зворотний виклик у клік thisбуде прив’язаний до компонента. З переходом до класів ES6 , ми повинні впоратися з цим обов'язковими перед собою Реагувати команду рекомендує в попередньому зв'язуванні конструктору .. " newmediacampaigns.com/blog / ...
Con Antonakos

1
Мені якось сподобалось, як це було з ES5 - і getInitialState ()
Alexander Mills

7

Приклад ES6: 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,
};

1

Якщо ми використовуємо поле класу, працює наступне.

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

Це можна використовувати замість

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

    this.state = {
      name: '',
      password: ''
    };
  };
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.