reactjs - Metoda render a unui component ar trebui să aibă tipul de returnare React.ReactNode sau JSX.Element?

Ambele par să nu rezulte în erori de compilare, dar care este diferența și este unul preferabil față de celălalt?

Răspuns #1

Această întrebare exactă a fost adresată în repository-ul react-typescript-cheatsheet, în issue-ul #57

Pentru a cita răspunsul original:

Indiferent de ceea ce redă în final un component, React.createElement returnează întotdeauna un obiect, care este interfața JSX.Element, dar React.ReactNode este setul tuturor valorilor posibile returnate de un component.

  • JSX.Element -> Valoarea returnată de React.createElement
  • React.ReactNode -> Valoarea returnată a unui component

În general, cred că ideea este că JSX.Element descrie în mod specific interfața lui React.createElement și are un domeniu limitat, în timp ce React.ReactNode este mai larg și acoperă toate valorile posibile pe care le-ar putea returna un Component.

Răspunsul #2

Depinde. ReactJS, în principiu, poate reda:

type RenderType = JSX.Element* | Array<RenderType> | string | number | boolean | null
// * includes Portal, Fragment
// for both function and class components
// (type doesn't exist in React type declarations)

Tipurile de redare TS sunt în prezent limitate la:

  • Componentă de clasă: ReactNode (mai larg decât este permis de React)

  • Componentă funcțională: JSX.Element | null (mai restrictiv decât React)

JSX.Element este mai mult sau mai puțin același lucru cu ReactElement, le poți folosi pe ambele interschimbabil.