TypeScript, React, Eslint 및 단순 Arrow 함수 컴포넌트 문제

TypeScript, React, Eslint 및 단순 Arrow 함수 컴포넌트 문제

저는 이 문제로 오전 내내 고민하고 있고, 어디에서도 해결책을 찾을 수 없었습니다.저는 타이프스크립트를 처음 접하기 때문에 코드 형식이 올바른지 확인하기 위해 Eslint와 Pretty에서 올바르게 셋업하려고 합니다.

그래서 기능적인 컴포넌트를 만들 때 직면하게 되는 문제가 있습니다.cheatsheet에 따르면 다음과 같은 간단한 컴포넌트를 내보내려고 합니다.

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 파일에서 수정/개선할 사항이 있으면 알려주세요.말씀드렸듯이 저는 TypeScript를 처음 접하기 때문에 보풀에 가장 적합한 옵션을 찾고 있습니다.

건배!

알레한드로

네, 정답인지는 모르겠지만 마지막으로 Eslint 설정을 변경하면 컴포넌트의 기능 유형을 변경할 수 있습니다..eslintrc.js 파일에 다음 규칙을 추가했습니다.

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

이 경우 eslint는 함수식(기본값)이 아닌 컴포넌트에 대한 화살표 기능만 받아들입니다.

최종 갱신:이는 현재 수정되었습니다.eslint-config-airbnb 」19.0.4

그 패키지의 카피를 19.0.4 이상으로 갱신하는 것이 가장 좋습니다.

---

이전 업데이트: 이것은 에어비앤비 설정 버전 18.2.1에서 19.0.2의 버그입니다.

올바른 설정은 다음과 같습니다.function-declaration.eslintrc.js

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

^ 현재 Airbnb 설정에서 해당 패치를 디폴트로 만들기 위한 오픈 PR이 존재하기 때문에 이 변경에 따라 프로젝트가 의도된 설정과 일치하게 됩니다.

주의: 관련 문제로 이동하여 유지보수 담당자가 문제를 해결했음을 알 수 있도록 업투표하는 것이 좋습니다.

이 문제가 해결되었으므로 버전을 19.0.4 이상으로 업데이트해야 합니다.

기타 옵션:에어비앤비 규칙 다운그레이드

다른 답변에서 언급되었듯이, 원하는 경우 에어비앤비 규칙 버전을 "bad" 규칙이 도입되기 전에 다운그레이드할 수도 있습니다(v18.2.1은 이 규칙이 없는 최신 버전입니다).이 작업은 패키지를 업데이트함으로써 수행됩니다.json:

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

이것은 당신의 프로젝트가 최신 Airbnb 스타일가이드를 사용하지 않는다는 것을 의미하므로, 당신은 단순히 규칙을 무시하는 것이 더 낫다고 결정할 수 있습니다.

---

이전 답변에서는 린터에 따라 "유효한" 코드가 생성됩니다.

에어비앤비 규칙을 준수하는 코드를 어떻게 작성해야 하는지 알 수 있었지만...저는 결과가 상당히 어색하고, 왜 바람직한 결과가 될지 잘 모르겠습니다.

디폴트 규칙에서는 (A) 함수식을 사용하여 컴포넌트를 정의해야 하지만 (B) 어나니머스 함수(스택 트레이스에서 "익명 함수"를 방지하기 위해)는 사용할 수 없으므로 함수의 이름도 다음과 같이 지정해야 합니다.

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

예를 들어 다음과 같습니다.

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

이것은 린터를 만족시키지만...이런, 내 말이 맞지?

문제가 해결되었으니 이 문제를 시도해 보십시오.

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

나는 그 문제를 극복할 수 있는 해결책을 찾았다.@slifty의 답변을 기반으로 합니다.「화살표 기능」과 「기능 선언」을 모두 서포트하는 경우는, 값을 문자열의 배열로 설정합니다.나의 설정을 다음과 같이 생각해 주세요.

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

이 솔루션과 함께 동작합니다."eslint-config-airbnb": "^19.0.4

패키지의 다음 종속성을 편집하는 중입니다.json은 나를 위해 일했다.

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

@ https://stackoverflow.com/a/70051760/9558119에서 갱신된 답변 감사합니다.저는 며칠 동안 여기 갇혀 있었습니다.

언급URL : https://stackoverflow.com/questions/69928061/struggling-with-typescript-react-eslint-and-simple-arrow-functions-components