如何使用eslint-plugin-react來修復由Flow Function Types引起的警告？

Question

我在反應組件的下一行收到警告

handleToggle: Function;

我正在使用eslint-plugin-react和Flow ，我收到警告“handleToggle應該放在構造函數之后”。 這與規則react / sort-comp有關。 我在.eslintrc.json上嘗試了以下內容

 "react/sort-comp": [1, {
  "order": [
    "static-methods",
    "lifecycle",
    "everything-else",
    "render"
  ],
  "groups": {
    "lifecycle": [
      "displayName",
      "propTypes",
      "contextTypes",
      "childContextTypes",
      "/^.*: Function$/",
      "mixins",
      "statics",
      "defaultProps",
      "state",
      "constructor",
      "getDefaultProps",
      "getInitialState",
      "getChildContext",
      "componentWillMount",
      "componentDidMount",
      "componentWillReceiveProps",
      "shouldComponentUpdate",
      "componentWillUpdate",
      "componentDidUpdate",
      "componentWillUnmount"
    ]
  }
}]

但是我無法修復警告。 我希望構造函數之前的函數類型與其他類型定義相同。 我怎樣才能做到這一點？

Answer 1

您現在可以在配置中的訂單部分添加“新”項（ type-annotations ）*：

"react/sort-comp": [
  2,
  {
    "order": [
      "type-annotations",  // <-- this is "new"
      "static-methods",
      "lifecycle",
      "everything-else",
      "render"
    ],
    "groups": {
      "lifecycle": [
        "displayName",
        "propTypes",
        "contextTypes",
        "childContextTypes",
        "mixins",
        "statics",
        "defaultProps",
        "constructor",
        "getDefaultProps",
        "state",
        "getInitialState",
        "getChildContext",
        "getDerivedStateFromProps",
        "componentWillMount",
        "UNSAFE_componentWillMount",
        "componentDidMount",
        "componentWillReceiveProps",
        "UNSAFE_componentWillReceiveProps",
        "shouldComponentUpdate",
        "componentWillUpdate",
        "UNSAFE_componentWillUpdate",
        "getSnapshotBeforeUpdate",
        "componentDidUpdate",
        "componentDidCatch",
        "componentWillUnmount"
      ]
    }
  }
]

在此之后，eslint將停止抱怨。

*在這里找到： https ： //github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md#rule-options

Answer 2

問題是eslint-plugin-react不知道Flow，因此沒有“類型定義”組。 您可以使用eslint將類型定義放在組件的開頭，方法是將"everything-else"移動到組件的頂部（在"static-methods" ，但這也允許您定義任何函數或實例變量（如果你正在使用它們）在constructor之前。

即，將.eslintrc.json更改為：

 "react/sort-comp": [1, {
  "order": [
    "everything-else",
    "static-methods",
    "lifecycle",
    "render"
  ],
  "groups": { /* ... */ }
 }]