无法在反应组件中定义箭头方法答案

【问题标题】：Can't define arrow methods in react components无法在反应组件中定义箭头方法
【发布时间】：2019-05-24 15:50:24
【问题描述】：

我正在尝试将我的反应组件的所有方法转换为箭头函数，这样我就不必事先绑定它们。但是每当我将方法转换为该语法时，反应就会开始出错。但是，匿名箭头函数可以正常工作。例如。 onClick={(e)=>{e.preventDefault()}} 工作正常。

我不确定，但我认为这可能是 react 或 eslintrc 配置的 vrsion 问题。

这是我的代码：

class MyComponent extends React.Component {
    handleChangeStart = startDate => {
        //this method is giving error for not being defined
    }

    handleChangeEnd(endDate) {
        //method that doesn't gives error.
    }
    render(){
        <DatePicker
             id='start_dt'
             className="border border-primary text-center"
             selected={this.props.startDate}
             selectsStart
             startDate={this.props.startDate}
             endDate={this.props.endDate}
             onChange={this.handleChangeStart}
             dateFormatCalendar={"MMM YYYY"}
             dropdownMode={"select"}
         />
        <DatePicker
             id='start_dt'
             className="border border-primary text-center"
             selected={this.props.startEnd}
             selectsEnd
             startDate={this.props.startDate}
             endDate={this.props.endDate}
             onChange={this.handleChangeEnd}
             dateFormatCalendar={"MMM YYYY"}
             dropdownMode={"select"}
         />
    }
}

这是我的 eslintrc 文件：


{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint"
}

编译失败。

./src/components/stats/Statistics.jsx 第 132 行：'handleChangeStart' 未定义 no-undef

搜索关键字以了解有关每个错误的更多信息。

编辑：

我在我的package.json 文件中将我的react-script 依赖版本从1.0.7 更改为3.0.1，并且错误消失了。谢谢大家的帮助。

【问题讨论】：

你能发布你的 babel 配置吗？
Arrow functions as class properties using Babel的可能重复
我认为你需要配置你的 webpack / babel 来编译 ES6 箭头函数。
将@babel/preset-env 添加到您的webpack.config.js presets 数组中。
@Nick Zuber，该怎么做。

标签： javascript reactjs eslint

【解决方案1】：

您正在设置类字段handleChangeStart（目前并非所有地方都支持），它不会在MyComponent 类上定义原型函数。如果您想使用箭头函数，可以通过多种方式进行，最简单的是：

使用构造函数。

class MyComponent extends React.Component {
  constructor(...args) {
    // pass forward any arguments to the react component constructor
    super(...args);

    // keep in mind that this doesn't set the prototype, but a property
    this.handleChangeStart = startDate => {
      // ...
    };
  }

  // ...
}

使用prototype。

class MyComponent extends React.Component {
  // ...
}

MyComponent.prototype.handleChangeStart = startDate => {
  // ...
};

【讨论】：

【解决方案2】：

你可以试试这个吗？我是新手，但这对我有用

const handleChangeStart = (startDate) => {

    }

【讨论】：

指定var/let/const 不适用于classFeilds。阅读有关TC39 的更多信息。也不需要() 围绕单个参数箭头函数。
@AmitDas Ahh 不知道。泰

【解决方案3】：

我没有看到您对箭头函数的实现会出错。我假设您在函数中使用 this 关键字。 Javascript 箭头函数不会在 this 键盘中捕获调用者，而使用 function 关键字声明的常规函数会将 this 作为调用者。

每当您在箭头函数中调用 this 时，它都会在外部范围内表示 this，有时这是您想要的，但大多数时候这会给您带来某种错误。

【讨论】：

尝试将答案选项仅限于solutions。您的回答应该是评论。