在创建-反应-应用程序中，我的组件无法编译，因为静态箭头函数返回未定义

Question

我有以下 React 组件。我正在使用 create-react-app ，它应该支持静态类字段，但这不会编译，而是抛出此错误：

./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;

Answer 1

我遇到了同样的问题。

我想通了，这是因为我的.eslintrc没有正确设置为接受"类字段和静态属性"。

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

让你的.eslintrc像这样：

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

它现在应该可以工作了。