REACT - 함수 구성 요소가 함수 선언이 아닙니다.
ESLint: Function component is not a function declaration (react/function-component-definition)
거의 모든 구성 요소에 대해. 내 구성 요소는 대부분 아래 코드와 같으며 다음 예제는 수정 방법을 보여줍니다.
TLDR 버전
// Turn this
const ActionButton: React.FC<ActionButtonProps> = (props) => { }
// into
function ActionButton(props: ActionButtonProps) {}
import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';
export interface ActionButtonProps {
/**
* Checks if the button should be disabled
*/
isDisabled: boolean;
/**
* Determines if the component is submitting. Results in disabled and spinner
*/
isSubmitting: boolean;
/**
* Children to be displayed in the button
*/
children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
/**
* Function for clicking
*/
onClick?: MouseEventHandler<any> | undefined;
/**
* The Type of button it is Reset, Button, Submit
*/
type?: 'button' | 'submit' | 'reset' | undefined;
/**
* The type of button to be used
* one of 'outlined' | 'text' | 'contained'
*/
variant?: 'outlined' | 'text' | 'contained';
/**
* Determines if the spinner is to be shown or not.
* @type {boolean}
*/
showSpinner?: boolean;
/**
* Determines if the button is full width or not.
* @type {boolean}
*/
fullWidth?: boolean;
}
const ActionButton: React.FC<ActionButtonProps> = ({
isDisabled = false,
children,
onClick = undefined,
variant = 'contained',
showSpinner = false,
isSubmitting = false,
type = 'submit',
fullWidth = false,
}) => {
const darkMode = useAppSelector((state) => state.darkMode);
return (
<Button
disabled={isDisabled || isSubmitting}
onClick={onClick}
variant={variant}
type={type}
fullWidth={fullWidth}
>
{(showSpinner || isSubmitting)
&& (
<Box sx={{ mr: 2 }}>
<CircularProgress
aria-describedby="submit-button"
size={12}
sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
/>
</Box>
)}
{children}
</Button>
);
}
export default ActionButton;
많은 다른 기사를 읽고 몇 가지를 시도한 후에 이것은 이제 되었습니다.
import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';
export interface ActionButtonProps {
/**
* Checks if the button should be disabled
*/
isDisabled: boolean;
/**
* Determines if the component is submitting. Results in disabled and spinner
*/
isSubmitting: boolean;
/**
* Children to be displayed in the button
*/
children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
/**
* Function for clicking
*/
onClick?: MouseEventHandler<any> | undefined;
/**
* The Type of button it is Reset, Button, Submit
*/
type?: 'button' | 'submit' | 'reset' | undefined;
/**
* The type of button to be used
* one of 'outlined' | 'text' | 'contained'
*/
variant?: 'outlined' | 'text' | 'contained';
/**
* Determines if the spinner is to be shown or not.
* @type {boolean}
*/
showSpinner?: boolean;
/**
* Determines if the button is full width or not.
* @type {boolean}
*/
fullWidth?: boolean;
}
function ActionButton({
isDisabled = false,
children,
onClick = undefined,
variant = 'contained',
showSpinner = false,
isSubmitting = false,
type = 'submit',
fullWidth = false,
}: ActionButtonProps) {
const darkMode = useAppSelector((state) => state.darkMode);
return (
<Button
disabled={isDisabled || isSubmitting}
onClick={onClick}
variant={variant}
type={type}
fullWidth={fullWidth}
>
{(showSpinner || isSubmitting)
&& (
<Box sx={{ mr: 2 }}>
<CircularProgress
aria-describedby="submit-button"
size={12}
sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
/>
</Box>
)}
{children}
</Button>
);
}
export default ActionButton;
참조
https://eslint.org/docs/rules/func-names
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md
Reference
이 문제에 관하여(REACT - 함수 구성 요소가 함수 선언이 아닙니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/andrewallison/react-function-component-is-not-a-function-declaration-58oc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)