reactjs - Typescript eksport standard: React.FunctionComponent

Hvordan ville jeg gått frem med dette i TypeScript. Jeg vet at jeg kan gjøre det ved å gi det et navn, men det er ikke det jeg spør om. Jeg spør hvordan jeg fortsatt kan bare bruke default.

interface IProps {
  name: string,
  tag: string,
}

export default ({name, tag}: IProps) => {
 ..... my code 
});

Ja, jeg vet om dette.

const MyComponent: React.FunctionComponent = () => {
...
export default MyComponent;

Svar #1

Eh, akkurat som du har det, bortsett fra den avsluttende )-syntaksfeilen

import React from "react"

interface IProps {
  name: string,
  tag: string,
}

export default ({name, tag}: IProps): JSX.Element => {
  return <p>hello { name }, some { tag }</p>
} // <- no trailing `)`

Eller -

import React from "react"

interface IProps {
  name: string,
  tag: string,
}

export default ({name, tag}: IProps): JSX.Element =>
  <p>hello { name }, some { tag }</p>

TypeScript-lekeplassdemo

Når det er sagt, er en navngitt funksjon mye bedre, spesielt for feilsøkingsformål.

Relaterte artikler