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

我整个上午都在为这个问题苦苦挣扎，在任何地方都找不到解决方案.我是typescript新手，我正在try 使用Eslint和Prettier正确设置它，以确保代码的格式正确.

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

import React from "react";

type DivProps = {
  text: string;
};

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

export default Div;

然而，eslint抱怨说，"函数组件不是函数表达式".

运行fix时，它会将我的函数转换为未命名函数:

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文件中看到任何其他需要修改/改进的内容，请告诉我.正如我所提到的，我对打字脚本还不熟悉，所以我仍在努力寻找最佳的线头 Select .

干杯

亚历杭德罗