reactjs - 反应类方法未定义 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] Parsing error: Unexpected token =" -- 在 helloWorldClick 箭头函数行。

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

无法编译 ./src/component/HelloWorldComponent.js 第 18 行：'helloWorldClick' 未定义 no-undef

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

Answer 1

在这里造成问题的不是箭头功能。类属性不是 ES6 规范的一部分。

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

或者，此转换作为 Babel阶段 2 预设的一部分提供。

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

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

Answer 2

我也遇到了这个问题。您可以将以下内容添加到每个组件文件的顶部，以防止出现“un-def”键错误消息，并且在不更改 es-lint 设置的情况下仍然使用箭头功能。

/* eslint no-undef: 0 */ // --> OFF

Answer 3

感谢您的回答。但我的问题不同。最后我解决了这个问题。通过将 eslint 版本降级到 3.19.0。它现在完美地工作。