Reactjs 类扩展React.Component可以'；不要在React中使用getInitialState

我在React中尝试ES6语法，并编写如下组件：

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

但浏览器却让我担心：

警告：getInitialState是在普通JavaScript Loginform上定义的 班级。这仅适用于使用创建的类 React.createClass。你的意思是要定义国有资产吗

我可以用传统的语法

var Loginform=React.createClass

处理它，但是什么是正确的ES6语法

---

另一件小事，我认为在传统语法中，

React.createClass

是一个对象，因此其中的函数用逗号分隔，但是对于

extensions

类，它需要分号，我不太理解。

在ES6类方法声明之间不需要分号或逗号

对于ES6类，

getInitialState

已被弃用，转而在构造函数中声明初始状态对象：

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

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

---

ES6类方法声明之间不需要分号或逗号

对于ES6类，

getInitialState

已被弃用，转而在构造函数中声明初始状态对象：

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

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

---

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,
};

从“React”导入React
从“react dom”导入react dom；
导出默认类项扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
检查：错误，
};
this.click=this.click.bind（this）；
}
单击（）{
this.setState（{check:true}）；
}
render（）{
const text=this.state.check？'yes'：'no'；
返回（{this.props.name}:{text}）
}
}
Item.defaultProps={
注释：“默认注释”，
};
项目.项目类型={
名称：React.PropTypes.string.isRequired，
};

ES6示例：状态、默认属性、属性类型

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,
};

从“React”导入React
从“react dom”导入react dom；
导出默认类项扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
检查：错误，
};
this.click=this.click.bind（this）；
}
单击（）{
this.setState（{check:true}）；
}
render（）{
const text=this.state.check？'yes'：'no'；
返回（{this.props.name}:{text}）
}
}
Item.defaultProps={
注释：“默认注释”，
};
项目.项目类型={
名称：React.PropTypes.string.isRequired，
};

如果我们使用class字段，那么下面的代码是有效的

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

这可以用来代替

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

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

---

如果我们使用class字段，下面的代码就起作用了

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

这可以用来代替

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

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

---

这样，当

console.log（this.state.name）

时，它会抛出一个关于

无法读取null属性“state”的错误

您试图在哪里调用它？在ES6类中，此不会自动绑定，这可能是问题的一部分：引用链接文章：React的

createClass

功能提供的一个优点是，它自动将您的方法绑定到组件实例。例如，这意味着在单击回调

中，此

将绑定到组件。随着迁移到ES6类，我们必须自己处理这个绑定。React团队建议在构造函数中进行预绑定。“我有点喜欢ES5的方式，而getInitialState（）在

console.log（this.state.name）中的方式

，它会抛出一个错误，关于

无法读取null的属性“state”

您试图在哪里调用它？在ES6类

中，此

不会自动绑定，这可能是问题的一部分：引用链接文章：React的

createClass

功能提供的一个优点是，它自动将您的方法绑定到组件实例。例如，这意味着在单击回调

中，此

将绑定到组件。随着迁移到ES6类，我们必须自己处理这个绑定。React团队建议在构造函数中进行预绑定。“我有点喜欢ES5的方式，getInitialState（）可能是@FelixKling-sure的副本。sorry可能是@FelixKling-sure的副本。对不起