错误：函数组件不是函数声明

Question

我使用 Material UI 的 TextField 作为组件。

import { FieldProps, getIn } from "formik";
import React from "react";

export const FormTextField: React.FC<FieldProps & TextFieldProps> = ({
  error,
  helperText,
  field,
  form,
  ...rest
}) => {
  const isTouched = getIn(form.touched, field.name);
  const errorMessage = getIn(form.errors, field.name);

  return (
    <TextField
      variant="outlined"
      fullWidth
      error={error ?? Boolean(isTouched && errorMessage)}
      helperText={
        helperText ?? (isTouched && errorMessage ? errorMessage : undefined)
      }
      {...rest}
      {...field}
    />
  );
};

当我运行pnpm lint时，它会抛出此错误：

错误：函数组件不是函数声明（react/function-component-definition）

我想使用这个组件，但找不到任何解决方案来解决它。它的解决方案是什么？请帮助我。谢谢

Answer 1

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

它告诉您它希望将组件声明为函数声明。

这意味着：

export function FormTextField<FieldProps & TextFieldProps>({ //...

事实上，看起来这个规则是可以自动修复的。如果你运行pnpm lint --fix这个问题可能会自行解决。