react组件写法的区别，以及代码的校验不通过？

Question

在react中我们命名组件中的方法的时候有很多中，例如第一种

class Header extends React.Component {
 constructor (props) {
    super(props)
    //（1处）
    this.getMes = this.getMes.bind(this)
    this.state = {
    }
  }
  //方法
  getMes() {
    //操作。。。。。 绑定this，可以在上面（1）处或者（2）处
  }
  render(){
    return(
      <div onClick={this.getMes.bind(this)}>(2)处</div>
    )
  }
}

上述的两种写法都可以通过standard的代码校验，(standard配置"parser": "babel-eslint",)

但是上面的这种写法比较繁琐，所以改用下面这种写法，省去了绑定this

getMes = () => {
    //操作。。。。
}

但是用这个方法写，代码校验就会说getMes 没有被定义，请问怎么解决？？？

Answer 1

在 class 里面直接定义 getMes = () => {} 这是目前 stage 3 Class properties的写法
你得先看看自己是否配置了恰当的 babel 支持
babel plugin

proposal

Answer 2

getMes = () => {} 相对于在 jsx 中 bind 拥有更好的性能
至于 eslint 语法校验问题,检查你的 eslint 配置文件,或者直接关闭它

Answer 3

你需要用const定义getMes函数，即const getMes = () => {}