En difficulté avec dactylographie, réagir, traverser les composants de fonctions de flèche simples et simples

Question

Je me suis battu toute la matinée avec cette question et je n'ai pas trouvé la solution nulle part. Je suis nouveau à documentscript et j'essaie de le configurer correctement avec ESLINT et plus jolie pour vous assurer que le code est correctement formé.

Donc, le problème que je suis confronté lors de la création de composants fonctionnels. Selon la feuille de triche, j'essaie d'exporter une composante simple telle que:

import React from "react";

type DivProps = {
  text: string;
};

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

export default Div;

Cependant, Eslint se plaint, disant que "la composante fonction n'est pas une expression de la fonction".

Lors de la course à pied, il convertira ma fonction en une fonction non nommée:

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

Et puis, il se plaint de dire "une fonction inattendue non nommée".

Même si j'essaie de refroidir la fonction:

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

Je reçois toujours la même erreur disant que "la composante fonction n'est pas une expression de la fonction".

Mon fichier .eslintrc.js est:

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: {},
    },
  },
};

Appréciez toute aide!

PS: Si vous voyez une autre chose que vous souhaitez modifier/améliorer dans le fichier ESLINTRC, faites-le-moi savoir. Comme je l'ai mentionné, je suis nouveau à Typescript, je suis donc toujours en train d'essayer de trouver les meilleures options pour les peluches.

Acclamations!

Alejandro

Answer 1

Modification des dépendances suivantes dans Packack.json a travaillé pour moi

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

Merci pour la réponse mise à jour @ https://stackoverflow.com/a/70051760/9558119 , j'étais coincé ici pendant des jours