解決似乎沒有意義的ESLint / React / Redux（Airbnb配置）錯誤

Question

我正在研究使用ESLint（Airbnb配置）和React / Redux。

下面的代碼是一個標准類型的React / Redux類，我寫這篇文章是為了享受Airbnb的所有linting規則。

通過了解Airbnb的配置偏好我已經解決了大部分掉毛錯誤，但是，我目前還有幾個方面不了解。 這些是：

1. 整個方法renderTableHeader（）以紅色標出，ESLint告訴我：

[eslint]期望'this'由類方法'renderTableHeader'使用。 （class-methods-use-this）（JSX屬性）className：string

沒有其他方法有這個linting問題

2. 我將一個從Redux狀態的對象連接到props（包含我需要在這個類中迭代的許多鍵/對象）。 ESLint似乎不喜歡我將對象從狀態連接到道具......給我的消息：

[eslint]禁止Prop類型object （react / forbid-prop-types）導入PropTypes

我的狀態對象是一個包含許多引用用戶對象的鍵的對象 - 所以我需要users成為一個對象。 這是不好的做法嗎？ 如果沒有出現這個lint消息，我將如何連接一個要映射的對象？

在此先感謝...這是我的課程：

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { getUsers } from '../actions/getUsers';
import setUserMarketingPref from '../actions/setUserMarketingPref';
import { setFilter } from '../actions/setFilter';
import TableRow from '../components/TableRow';
import '../styles/styles.css';

class AppContainer extends Component {
  componentDidMount() {
    this.props.getUsers();
  }

  renderTableHeader() {
    return (
      <div className="table__header">
        <div className="table__header--name">Name</div>
        <div className="table__header--gender">Gender</div>
        <div className="table__header--region">Region</div>
      </div>
    );
  }

  renderTable() {
    const { users, filterMode } = this.props;
    const usersView = filterMode ? _.omitBy(users, user => !user.checked) : users;
    return _.map(usersView, user => (
      <TableRow
        user={user}
        key={user.id}
        setUserMarketingPref={_.debounce(() => this.props.setUserMarketingPref(user.id), 100)}
      />
    ));
  }

  renderFilters() {
    return (
      <div className="table__buttons">
        <button
          id="marketing-other"
          className="table__other"
          onClick={e => this.props.setFilter(e.target.id)}
        >Other filter
        </button>
        <button
          id="marketing-none"
          className="table__no-marketing"
          onClick={e => this.props.setFilter(e.target.id)}
        >No marketing
        </button>
      </div>
    );
  }

  render() {
    if (!_.size(this.props.users)) {
      return null;
    }
    return (
      <div className="table__container">
        {this.renderTableHeader()}
        {this.renderTable()}
        {this.renderFilters()}
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => bindActionCreators(
  {
    getUsers,
    setUserMarketingPref,
    setFilter,
  },
  dispatch,
);

const mapStateToProps = state => ({
  users: state.users,
  filter: state.filter,
  filterMode: state.marketing.filterMode,
});

AppContainer.defaultProps = {
  filterMode: false,
  getUsers: null,
  setUserMarketingPref: null,
  setFilter: null,
};

AppContainer.propTypes = {
  users: PropTypes.object,
  filterMode: PropTypes.bool,
  getUsers: PropTypes.func,
  setUserMarketingPref: PropTypes.func,
  setFilter: PropTypes.func,
};

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);

Answer 1

這兩條規則涉及兩個不同的事情

第一：期望'this'由類方法'renderTableHeader'使用。 （class-methods-use-this）（JSX屬性）className：string

根據文件

如果類方法不使用它，有時可以將其作為靜態函數。 如果您確實將方法轉換為靜態函數，則調用該特定方法的類的實例也必須轉換為靜態調用(MyClass.callStaticMethod())

另請注意，在上面的示例中，如果將方法切換為靜態方法，則調用靜態方法的類的實例(let a = new A(); a.sayHi();)必須更新為靜態方法call (A.sayHi();)而不是讓類的實例調用該方法

如何避免此警告

exceptMethods選項允許您傳遞要忽略警告的方法名稱數組。 例如，您可能有一個來自外部庫的規范要求您將方法覆蓋為常規函數（而不是靜態方法），並且不在函數體內使用它。 在這種情況下，您可以在警告中添加要忽略的方法。

"class-methods-use-this": [<enabled>, { "exceptMethods": [<...exceptions>] }]

第二：禁止Prop類型對象（react / forbid-prop-types）導入PropTypes

最好定義不模糊的PropTypes，例如any ， array ， object ，它們不能清楚地告訴你prop的實際類型。

根據文件

默認情況下，此規則可防止含有更多特定替代項的模糊prop類型（any，array，object），但如果需要，可以禁用任何prop類型。 選擇默認值是因為它們具有明顯的替代品。 任何東西都應該被替換。 數組和對象可以分別替換為arrayOf和shape。

在你的情況下說user是一個像對象

{
    id: 123,
    name: 'abc'
}

你可以像這樣定義PropType

AppContainer.propTypes = {
  users: PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string
  }),,
  filterMode: PropTypes.bool,
  getUsers: PropTypes.func,
  setUserMarketingPref: PropTypes.func,
  setFilter: PropTypes.func,
};