React + Flow + eslint答案

【问题标题】：React + Flow + eslintReact + Flow + eslint
【发布时间】：2017-11-14 09:47:37
【问题描述】：

我整天都在努力解决这个错误。我正在尝试将 Flow 添加到我的 React 应用中。

我有一个这样声明的组件：

// @flow
class MyComponent extends Component {
  static defaultProps = {
    prop1: 'a',
    prop2: 'b'
  };
  handleOnClick: (value: string) => void;
  props: MyComponentProps;
}

然后输入 MyComponentProps

type MyComponentProps = {
  prop1: string,
  prop2: string
};

现在，Flow 没有报告任何错误。但是当我尝试运行该应用程序时，我收到eslint 错误：

 error  'defaultProps' is not defined   no-undef
 error  'handleOnClick' is not defined  no-undef
 error  'props' is not defined          no-undef

我正在使用babel-eslint 和eslint-plugin-flowtype。我已将flowtype/define-flow-type 规则添加到我的.eslintrc 文件中。这是我的.eslintrc 文件的相关部分：

{
  "parser": "babel-eslint",
  "plugins": [
    "flowtype",
    "react"
  ],
  "extends": [
    "plugin:flowtype/recommended"
  ],
  "rules": {
    "flowtype/define-flow-type": 1,
    "flowtype/use-flow-type" : 1,
    "no-undef": 2,
    "react/jsx-no-undef": 2
   }}

我错过了什么？

【问题讨论】：

您是否在声明中或在某处引用了这些 ESLint 错误？
关于声明。
你有哪些版本的 eslint、babel-eslint 和 eslint-plugin-flowtype？

标签： reactjs eslint type-safety

【解决方案1】：

您是否使用 import React from 'react' 导入了 React？

【讨论】：

是的 :) 这是一个工作组件，我只是想为其添加类型安全性。
props ` props: MyComponentProps;` --> 这是它不知道它在哪里声明的抱怨之一。如果这是一个组件，那么您将需要使用 propTypes 或 contextTypes。 npmjs.com/package/prop-types
stackoverflow.com/questions/38786973/… 看看这篇文章。如果您还有其他问题，请询问。
应将处理程序声明为您尝试导出的类中的函数。它应该是 handleClick() {} 您在导出的类的末尾还缺少一个分号。
我认为你没有抓住重点。我正在尝试将 Flow 添加到组件中，并且我相信我这样做是正确的。我不想要propTypes。

【解决方案2】：

您收到错误的原因是 lint 无法检测到您的环境。

您可以在“.eslintrc.json”文件中进行如下编辑。

"env": {
    "browser": true,
    "es6": true
},

或者

"parserOptions": {
  "ecmaVersion": 6

更多详细信息：https://eslint.org/docs/rules/no-undef

【讨论】：

请哥们详细说明，不要提供意见作为答案（我认为或我猜等）