如何使用修复由流函数类型引起的警告？

Question

我收到关于我的react组件的下面一行的警告

handleToggle: Function;

我正在使用eslint插件反应和流，并且收到了一个警告："handleToggle应该放在构造函数后面“。这与规则反应/排序-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没有意识到流，所以没有“类型定义”的组。您可以通过将"everything-else"移动到组件的顶部(在"static-methods"之前，但这也允许您在constructor之前定义任何函数或实例变量)，从而使您可以将类型定义放在组件的开头。

ie，将.eslintrc.json更改为：

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

Answer 2

现在可以向配置中的order部分添加一个“新”项(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"
      ]
    }
  }
]

在此之后，埃斯林特将停止抱怨。

*在这里发现：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md#rule-options