reactjs - Eslint: Problem med standardpropper i funktionell komponent (Typescript - React)

Vad jag har

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;

Problem

Eslint react-plugin klagar med detta fel ESLint: propType "gretting" är inte obligatorisk, men har ingen motsvarande defaultProps-deklaration.(react/require-default-props).

Enligt detta svar är tillvägagångssättet som används för defaultProps med standardvärden för parametrar okej, så vad är det bästa sättet att lösa detta problem? Använd Hello.defaultProps={} eller stäng av regeln react/require-default-props? Finns det ett bättre tillvägagångssätt?.

Svar #1

Jag hittade en annan lösning för funktionella komponenter - du kan helt enkelt använda React.FC, vilket ger typkontroll och autokomplettering för statiska egenskaper som defaultProps.

const Hello: React.FC<{name: string, gretting: string}> = ({ name, gretting = 'night' }) =>

I så fall behöver du inte använda gränssnitt alls. Men om du av någon anledning vill:

const Hello: React.FC<IProps> = ({ name, gretting = 'night' }) =>

===== UPPDATERING=====

Dessutom:

"react/prop-types": "off" // Since we do not use prop-types
"react/require-default-props": "off" // Since we do not use prop-types

Svar #2

Jag har haft det här problemet och löste det genom att exportera typen eller gränssnittet, även om jag inte kan förklara varför det var lösningen på problemet.

export interface Props {
  name: string;
  greeting?: string;
}

const Hello = ({name, greeting = 'Hi'}: Props): JSX.Element = {}

redigera: upptäckte att du behöver Typescript 3.0 enligt detta svar: https://stackoverflow.com/a/51486735/5059401

Relaterade artiklar