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 第18行：'helloWorldClick'未定义no-undef

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

react类方法没有定义no-undef

3 个答案: