Function component is not a function declaration. eslint(react/function-component-definition)报错原因

这个是eslint-plugin-react 的规则！

阅读该 linting 规则的文档：https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md

它告诉你，这个规则它期望将组件声明为函数声明。

为函数组件强制实施特定函数类型 （ react/function-component-definition ）

此规则旨在为函数组件强制实施一致的函数类型。默认情况下，它更喜欢命名组件的函数声明和未命名组件的函数表达式。

Examples of incorrect code for this rule:
此规则的错误代码示例：

// function expression for named component
const Component = function (props) {
  return <div>{props.content}</div>;
};

// arrow function for named component
const Component = (props) => {
  return <div>{props.content}</div>;
};

// arrow function for unnamed component
function getComponent() {
  return (props) => {
    return <div>{props.content}</div>;
  };
}

Rule Options 规则选项

此规则将选项对象作为第二个参数，其中可以指定组件的首选函数类型。选项对象的第一个属性可以是 "namedComponents" 、 "function-declaration" "arrow-function" 、 "function-expression" 或包含其中任何一个的数组，并且作为 'function-declaration' 其默认值。第二个属性可以是 "unnamedComponents" "function-expression" 、 "arrow-function" 或包含其中任何一个的数组，并且具有 'function-expression' 默认值。

"react/function-component-definition": [<enabled>, {
  "namedComponents": "function-declaration" | "function-expression" | "arrow-function" | Array<"function-declaration" | "function-expression" | "arrow-function">,
  "unnamedComponents": "function-expression" | "arrow-function" | Array<"function-expression" | "arrow-function">
}]

此规则的错误代码示例：

// only function declarations for named components
// [2, { "namedComponents": "function-declaration" }]
const Component = function (props) {
  return <div />;
};

const Component = (props) => {
  return <div />;
};

// only function expressions for named components
// [2, { "namedComponents": "function-expression" }]
function Component (props) {
  return <div />;
};

const Component = (props) => {
  return <div />;
};

// only arrow functions for named components
// [2, { "namedComponents": "arrow-function" }]
function Component (props) {
  return <div />;
};

const Component = function (props) {
  return <div />;
};

// only function expressions for unnamed components
// [2, { "unnamedComponents": "function-expression" }]
function getComponent () {
  return (props) => {
    return <div />;
  };
}

// only arrow functions for unnamed components
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent () {
  return function (props) {
    return <div />;
  };
}

此规则的正确代码示例：

// only function declarations for named components
// [2, { "namedComponents": "function-declaration" }]
function Component (props) {
  return <div />;
}

// only function expressions for named components
// [2, { "namedComponents": "function-expression" }]
const Component = function (props) {
  return <div />;
};

// only arrow functions for named components
// [2, { "namedComponents": "arrow-function" }]
const Component = (props) => {
  return <div />;
};

// only function expressions for unnamed components
// [2, { "unnamedComponents": "function-expression" }]
function getComponent () {
  return function (props) {
    return <div />;
  };
}

// only arrow functions for unnamed components
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent () {
  return (props) => {
    return <div />;
  };
}

Unfixable patterns 无法修复的模式

There is one unfixable pattern in JavaScript.
JavaScript 中有一个无法修复的模式。

It has to do with the fact that this is valid syntax:
这与这是有效语法的事实有关：

export default function getComponent () {
  return <div />;
}

While these are not:

export default var getComponent = () => {
  return <div />;
}

export default var getComponent = function () {
  return <div />;
}

These patterns have to be manually fixed.
这些模式必须手动修复。

Heads up, TypeScript users

请注意，自动修复器对于 TypeScript 用户来说有些限制。

以下模式不能在 TypeScript 中自动修复：

// function expressions and arrow functions that have type annotations cannot be autofixed to function declarations
// [2, { "namedComponents": "function-declaration" }]
const Component: React.FC<Props> = function (props) {
  return <div />;
};

const Component: React.FC<Props> = (props) => {
  return <div />;
};

// function components with one unconstrained type parameter cannot be autofixed to arrow functions because the syntax conflicts with jsx
// [2, { "namedComponents": "arrow-function" }]
function Component<T>(props: Props<T>) {
  return <div />;
};

const Component = function <T>(props: Props<T>) {
  return <div />;
};

// [2, { "unnamedComponents": "arrow-function" }]
function getComponent() {
  return function <T>(props: Props<T>) => {
    return <div />;
  }
}

如果存在多个类型参数，或者只有一个受约束的类型参数，则类型参数不会产生语法冲突。

可以在 TypeScript 中自动修复以下模式：

// autofix to function expression with type annotation
// [2, { "namedComponents": "function-expression" }]
const Component: React.FC<Props> = (props) => {
  return <div />;
};

// autofix to arrow function with type annotation
// [2, { "namedComponents": "function-expression" }]
const Component: React.FC<Props> = function (props) {
  return <div />;
};

// autofix to named arrow function with one constrained type parameter
// [2, { "namedComponents": "arrow-function" }]
function Component<T extends {}>(props: Props<T>) {
  return <div />;
}

const Component = function <T extends {}>(props: Props<T>) {
  return <div />;
};

// autofix to named arrow function with multiple type parameters
// [2, { "namedComponents": "arrow-function" }]
function Component<T1, T2>(props: Props<T1, T2>) {
  return <div />;
}

const Component = function <T1, T2>(props: Props<T2>) {
  return <div />;
};

// autofix to unnamed arrow function with one constrained type parameter
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent() {
  return function <T extends {}> (props: Props<T>) => {
    return <div />;
  };
}

// autofix to unnamed arrow function with multiple type parameters
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent() {
  return function <T1, T2>(props: Props<T1, T2>) => {
    return <div />;
  }
}

When Not To Use It
何时不使用它
如果您对一致类型的函数组件不感兴趣。