反应类方法未定义 no-undef

Question

我是反应的新手。我的应用程序运行正常，但在添加 eslint(airbnb) 后，我的应用程序无法编译。

export default class HelloWorldComponent extends React.Component {
  render() {
    return (
      <div>
        <div>{this.props.message}</div>
        <button onClick={this.props.helloWorldClick}>Hello 
        World</button>
      </div>
    )
  }
  helloWorldClick = () => {
    console.log('here') 
  }
}

在 .eslintrc 文件上添加 { "parser": "babel-eslint" } 之前，它抛出了 eslint 错误

“[eslint] 解析错误：意外的令牌 =”——在 helloWorldClick 箭头函数行上。

添加解析器后，我没有任何 elsint 错误。但是运行该应用程序时出现编译错误。

编译失败 ./src/component/HelloWorldComponent.js Line 18: 'helloWorldClick' is not defined no-undef

请让我知道如何解决此错误。

Answer 1

造成问题的不是箭头函数。类属性不是 ES6 规范的一部分。

如果您希望能够转换此代码，则需要添加类属性 babel plugin。

或者，此变换作为 Babel 的第二阶段预设的一部分提供。

使用带有类属性的箭头函数可确保始终使用组件作为其值来调用该方法，这意味着此处的手动重新绑定是多余的。

this.helloWorldClick = this.helloWorldClick.bind (this);