reactjs - React + Typescript: Type af React-komponent uden tilstand/props

Jeg har set flere eksempler på React-komponenter, der bruger TypeScript:

class Foo extends React.Component<IProps, IState> {}

Det ser ud til, at der ikke er en klar konvention, når vi ikke bruger hverken Props eller State.

Folk sætter disse typer som any, null, undefined, {}, void, osv. Dette er, hvad jeg har set indtil videre:

  1. class Foo extends React.Component<null, null> {}
  2. class Foo extends React.Component<any, any> {}
  3. class Foo extends React.Component<{}, {}> {}
  4. class Foo extends React.Component<undefined, undefined> {}
  5. class Foo extends React.Component<void, void> {}
  6. class Foo extends React.Component<object, object> {}

Hvad er den bedste måde at gøre det på?

Opdatering:

  • Rekvisitter:

    • void kan ikke bruges (https://github.com/Microsoft/TypeScript/issues/15409 og https://github.com/Microsoft/TypeScript/issues/15419), da props-objektet initialiseres til {}

LØSNING

Gør blot - class Foo extends React.Component {}, da prop og state initialiseres til {}

Svar #1

Som besvaret på dette spørgsmål, kan du bruge React.FC<{}> klassen

const MyStatelessComponent : React.FC<{}> = props =>
    <div>{props.children}</div>

Eller hvis dit påslag bliver større:

const MyStatelessComponent : React.FC<{}> = props => {

    {/*  Some code here */}
    return <div>{props.children}</div>

}

Svar #2

Fra https://github.com/DefinitelyTyped/DefinitelyTyped/blob/15b7bac31972fbc081028937dfb1487507ca5fc9/types/react/index.d.ts#L199-L200

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

Props og state initialiseres til {}, så for en komponent uden hverken state eller props kan vi simpelthen gøre:

class Foo extends React.Component {}

Svar #3

Ifølge denne vejledning og min erfaring, vil jeg sige:

  1. class Foo extends React.Component<null, null> {}, når du ved, at du ikke vil modtage props eller state
  2. class Foo extends React.Component<any, any> {} når du ved, at du vil modtage props og state, men du egentlig ikke bryder dig om, hvordan de ser ud
  3. class Foo extends React.Component<{}, {}> {} har jeg aldrig set, virker mærkeligt
  4. class Foo extends React.Component<undefined, undefined> {} det samme som null, det er op til dig. Jeg ser oftere null end undefined
  5. class Foo extends React.Component<void, void> {} dårlig idé, da det ser ud til at være reserveret til funktioners returværdi (når du ikke forventer nogen)

Andre meninger er velkomne

Relaterede artikler