Question

我在反应组件的下一行收到警告

handleToggle: Function;

我正在使用eslint-plugin-react和Flow并且我正在收到警告＆＃34; handleToggle应该放在构造函数＆＃34;之后。这与规则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，因此没有“类型定义”组。您可以通过将"everything-else"移动到组件的顶部（"static-methods"之前）来制作eslint，让您将类型定义放在组件的开头，但这也可以让您定义任何函数或实例变量（如果您正在使用它们）constructor之前。

即，将.eslintrc.json更改为：

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

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

2 个答案: