reactjs - React 类方法未定义 no-undef

Question

我是 react 新手。我的应用程序运行正常，但添加 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] Parsing error: Unexpected token =" --on the helloWorldClick arrow function line.

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

Failed to compile ./src/component/HelloWorldComponent.js Line 18: 'helloWorldClick' is not defined no-undef

请告诉我如何解决此错误。

Answer 1

这不是导致问题的箭头函数。类属性不是 ES6 规范的一部分。

如果您希望能够转换此代码，则需要添加 class properties babel plugin .

或者，此转换作为 Babel 的 stage 2 preset 的一部分提供。 .

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

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