挣扎于 TypeScript、React、Eslint 和简单的箭头函数组件

Question

我整个早上都在为这个问题苦苦挣扎，却找不到任何解决方案。我是打字稿的新手，我正在尝试使用 Eslint 和 Prettier 对其进行正确设置，以确保代码格式正确。

所以，我在创建功能组件时面临的问题。根据备忘单，我正在尝试导出一个简单的组件，例如：

import React from "react";

type DivProps = {
  text: string;
};

const Div = ({ text }: DivProps): JSX.Element => (<div>{text}</div>)

export default Div;

然而，eslint 正在抱怨，说“函数组件不是函数表达式”。

当运行修复时，它会将我的函数转换为未命名函数：

const Div = function ({ text }: DivProps): JSX.Element {
  return <div>{text}</div>;
};

然后它会抱怨说“意外的未命名函数”。

即使我尝试将函数重构为：

function Div({ text }: DivProps): JSX.Element {
  return <div>{text}</div>;
};

我仍然收到同样的错误提示“函数组件不是函数表达式”。

我的 .eslintrc.js 文件是：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb", "plugin:@typescript-eslint/recommended", "prettier"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["@typescript-eslint", "react-hooks", "prettier"],
  rules: {
    "react-hooks/rules-of-hooks": "error",
    "prettier/prettier": "error",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "react/jsx-filename-extension": [
      1,
      {
        extensions: [".tsx"],
      },
    ],
    "import/prefer-default-export": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        ts: "never",
        tsx: "never",
      },
    ],
  },
  settings: {
    "import/resolver": {
      typescript: {},
    },
  },
};

感谢任何帮助！

PS：如果您在 eslintrc 文件中看到任何其他内容，您会 amend/improve 让我知道。正如我提到的，我是 TypeScript 的新手，所以我仍在努力寻找 linting 的最佳选择。

干杯！

亚历杭德罗

Answer 1

好的，所以我不知道这是否是正确答案，但最终更改 Eslint 中的设置帮助我更改了 Components 的函数类型。我将以下规则添加到我的 .eslintrc.js 文件中：

"react/function-component-definition": [
  2,
  {
    namedComponents: "arrow-function",
    unnamedComponents: "arrow-function",
  },
],

有了这个，eslint 将只接受组件的箭头函数，而不是函数表达式（默认情况下）。

Answer 2

最终更新： 这已更正为 eslint-config-airbnb 版本 19.0.4

最好的办法是将该软件包的副本更新到 19.0.4 或更高版本。

过去的更新：~~这实际上是~~这是a bug in the airbnb configuration版本 18.2.1 到 19.0.2

正确的设置应该是 function-declaration，所以正确的解决方案是覆盖 .eslintrc.js

中的规则

"react/function-component-definition": [
  2,
  {
    namedComponents: "function-declaration",
  },
],

^ 目前目前在airbnb设置中默认是~~an open PR~~ a now merged PR to make that patch，因此此更改将使您的项目与预期设置一致。

~~注意：您可能需要考虑导航到 relevant issue 并对其进行投票，以便维护人员知道您正在处理它。~~

现在这个问题已经解决，您应该将您的版本更新到 19.0.4 或更高版本。

另一种选择：降级爱彼迎规则

如所述：如果愿意，您还可以将爱彼迎规则的版本降级到引入“不良”规则之前的版本（v18.2.1 是没有此规则的最新版本）。这是通过更新您的 package.json:

来完成的

"devDependencies": {
  ...
  "eslint-config-airbnb": "^18.2.1"
}

请注意，这意味着您的项目不会使用最新的 airbnb 风格指南，因此您可能会决定最好直接覆盖该规则。

我之前的回答，将根据 linter 创建“有效”代码：

我也遇到过这个问题；我能够弄清楚如何编写符合 airbnb 规则的代码，但是......我发现结果很尴尬，而且我不确定为什么它会成为首选结果。

在默认规则下，您需要 (A) 使用函数表达式定义您的组件，而且 (B) 您不能使用匿名函数（这是为了防止堆栈跟踪中的“匿名函数”），因此还必须命名函数：

const MyComponent = function MyComponent() { ... }

所以使用你的例子：

const Div = function Div({ text }: DivProps): JSX.Element {
  return <div>{text}</div>;
};

这满足了 linter 但是...哎呀，我说得对吗？

Answer 3

在 package.json 中编辑以下依赖项对我有用

"devDependencies": {
"eslint-config-airbnb": "^18.1.0"}

感谢@ 更新的答案，我被困在这里好几天了

挣扎于 TypeScript、React、Eslint 和简单的箭头函数组件

Struggling with TypeScript, React, Eslint and simple Arrow Functions components

reactjs

typescript

eslint

eslintrc

eslint-config-airbnb