在 create-react-app 中，我的组件无法编译，因为静态箭头函数返回未定义答案

【问题标题】：In create-react-app, my component won't compile because a static arrow function comes back undefined在 create-react-app 中，我的组件无法编译，因为静态箭头函数返回未定义
【发布时间】：2017-11-19 08:08:26
【问题描述】：

我有以下 React 组件。我正在使用create-react-app，它应该是support static class fields，但这不会编译，而是会抛出这个错误：

./src/scenes/Settings/components/UserSettings.js
  Line 7:   'onTempRangeChange' is not defined        no-undef

我的理解是箭头函数应该将onTempRangeChange的上下文绑定到类，这应该与传递给TemperatureRange的prop中引用的this相同。

import React, { Component } from 'react';
import { setTempRange } from '../actions';
import TemperatureRange from './TemperatureRange';

class UserSettings extends Component {

  onTempRangeChange = (tempRange) => {
    const { dispatch } = this.props;
    dispatch(setTempRange(tempRange));
  }

  render() {
    const { tempRange } = this.props;

    return (
      <div>
        <TemperatureRange
          tempRange={tempRange}
          onTempRangeChange={this.onTempRangeChange}
        />
      </div>
    );
  }
}

export default UserSettings;

【问题讨论】：

您是否收到此组件或 TemperatureRange 组件的此错误，除非您使用 connect，否则调度也将不可用
@ShubhamKhatri 对于这个组件。此外，在此场景的容器上完成了连接 - 这不是问题。

标签： reactjs ecmascript-6 react-redux es6-class arrow-functions

【解决方案1】：

我遇到了同样的问题。

我发现这是因为我的.eslintrc 没有设置为接受“类字段和静态属性”。

我将其更改为仅使用 Create React App eslint 配置。

让你的.eslintrc 像这样：

{
  "extends": ["react-app"]
}

它现在应该可以工作了。

【讨论】：