如何使用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

问题是eslint-plugin-react不知道 Flow，因此没有“类型定义”组。您可以使 eslint 让您将类型定义移动"everything-else"到组件的顶部（之前"static-methods"，但这也允许您在之前定义任何函数或实例变量（如果您正在使用它们））这 constructor 。

即，将您的更改.eslintrc.json为：

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