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 {props.content};
};
// arrow function for named component
const Component = (props) => {
return {props.content};
};
// arrow function for unnamed component
function getComponent() {
return (props) => {
return {props.content};
};
}Rule Options 规则选项
此规则将选项对象作为第二个参数，其中可以指定组件的首选函数类型。选项对象的第一个属性可以是 "namedComponents" 、 "function-declaration" "arrow-function" 、 "function-expression" 或包含其中任何一个的数组，并且作为 'function-declaration' 其默认值。第二个属性可以是 "unnamedComponents" "function-expression" 、 "arrow-function" 或包含其中任何一个的数组，并且具有 'function-expression' 默认值。
"react/function-component-definition": [, {
"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 ;
};
const Component = (props) => {
return ;
};
// only function expressions for named components
// [2, { "namedComponents": "function-expression" }]
function Component (props) {
return ;
};
const Component = (props) => {
return ;
};
// only arrow functions for named components
// [2, { "namedComponents": "arrow-function" }]
function Component (props) {
return ;
};
const Component = function (props) {
return ;
};
// only function expressions for unnamed components
// [2, { "unnamedComponents": "function-expression" }]
function getComponent () {
return (props) => {
return ;
};
}
// only arrow functions for unnamed components
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent () {
return function (props) {
return ;
};
}此规则的正确代码示例：
// only function declarations for named components
// [2, { "namedComponents": "function-declaration" }]
function Component (props) {
return ;
}
// only function expressions for named components
// [2, { "namedComponents": "function-expression" }]
const Component = function (props) {
return ;
};
// only arrow functions for named components
// [2, { "namedComponents": "arrow-function" }]
const Component = (props) => {
return ;
};
// only function expressions for unnamed components
// [2, { "unnamedComponents": "function-expression" }]
function getComponent () {
return function (props) {
return ;
};
}
// only arrow functions for unnamed components
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent () {
return (props) => {
return ;
};
}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 ;
}While these are not:
export default var getComponent = () => {
return ;
}
export default var getComponent = function () {
return ;
}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 = function (props) {
return ;
};
const Component: React.FC = (props) => {
return ;
};
// 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(props: Props) {
return ;
};
const Component = function (props: Props) {
return ;
};
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent() {
return function (props: Props) => {
return ;
}
} 如果存在多个类型参数，或者只有一个受约束的类型参数，则类型参数不会产生语法冲突。
可以在 TypeScript 中自动修复以下模式：
// autofix to function expression with type annotation
// [2, { "namedComponents": "function-expression" }]
const Component: React.FC = (props) => {
return ;
};
// autofix to arrow function with type annotation
// [2, { "namedComponents": "function-expression" }]
const Component: React.FC = function (props) {
return ;
};
// autofix to named arrow function with one constrained type parameter
// [2, { "namedComponents": "arrow-function" }]
function Component(props: Props) {
return ;
}
const Component = function (props: Props) {
return ;
};
// autofix to named arrow function with multiple type parameters
// [2, { "namedComponents": "arrow-function" }]
function Component(props: Props) {
return ;
}
const Component = function (props: Props) {
return ;
};
// autofix to unnamed arrow function with one constrained type parameter
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent() {
return function (props: Props) => {
return ;
};
}
// autofix to unnamed arrow function with multiple type parameters
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent() {
return function (props: Props) => {
return ;
}
}