import { NextPage } from 'next'; import React from 'react'; interface Props { name: string; gretting?: string; // Error: ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) } const Hello: React.FunctionComponent<Props> = ({ name, gretting = 'night' }: Props) => <p>Hi {name} Good {gretting}</p>; const Home: NextPage = () => <Hello name="Jhon Doe" />; export default Home; El complemento de reacción de Eslint se queja con este error ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) .
De acuerdo con esta respuesta , el enfoque utilizado para defaultProps con valores de parámetros predeterminados está bien, entonces, ¿cuál es la mejor manera de resolver este problema? Use Hello.defaultProps = {} o desactive la regla react/require-default-props ? hay un mejor enfoque?.
defaultProp se usa cuando la prop pasada es nula o indefinida
interface Props { name: string; gretting?: string;// question mark means it could be undefined } en esta interfaz declaraste el nombre como una cadena, lo que significa que no será nulo o indefinido, por lo que puedes omitir la propiedad predeterminada.
pero gretting se declara como cadena o indefinido, por lo que hay un cambio, será indefinido, por lo que es necesario un valor predeterminado.
Hello.defaultProps = { gretting: '', };editar: descubrió que necesita Typescript 3.0 según esta respuesta: https://stackoverflow.com/a/51486735/5059401
Tuve este problema y lo solucioné exportando el tipo o la interfaz, aunque no puedo explicar por qué esa fue la solución al problema.
export interface Props { name: string; greeting?: string; } const Hello = ({name, greeting = 'Hi'}: Props): JSX.Element = {}editar: descubrió que necesita Typescript 3.0 según esta respuesta: https://stackoverflow.com/a/51486735/5059401
Encontré otra solución para componentes funcionales: solo puede usar React.FC , que proporciona verificación de tipo y autocompletado para propiedades estáticas como defaultProps.
const Hello: React.FC<{name: string, gretting: string}> = ({ name, gretting = 'night' }) =>En ese caso, no tiene que usar la interfaz en absoluto. Pero en caso de que quieras por alguna razón:
const Hello: React.FC<IProps> = ({ name, gretting = 'night' }) =>===== ACTUALIZAR=====
Adicionalmente:
"react/prop-types": "off" // Since we do not use prop-types
"react/require-default-props": "off" // Since we do not use prop-types