javascript - Tekst i JSX har typen 'string', men den forventede typen for 'children' er 'string | Element | Element[]'

Jeg har en tilpasset React-knappekomponent som jeg ønsker skal kunne ta valgfrie strenger med eller uten valgfrie ikoner (JSX.Element) som barn.

Mitt grensesnitt ser slik ut

interface IUploadFileButtonProps {
  children: string | JSX.Element | JSX.Element[];
}

Og implementeringen:

// Does not work
<UploadFileButton>
  <FaUpload />
  Add new list
</UploadFileButton>

// Works
<UploadFileButton>
  No icon, just text
</UploadFileButton>

// Works
<UploadFileButton>
  <FaUpload />
</UploadFileButton>

// Works
<UploadFileButton>
  <FaUpload />
  <FaUpload />
</UploadFileButton>

Jeg får denne feilmeldingen:

Tekst i JSX har typen 'string', men den forventede typen for 'children' er 'string | Element | Element[]'

Som jeg antar er fordi Typescript forventer én av typene, men ikke mer enn én type om gangen.

Hvordan kan jeg spesifisere en valgfri streng og/eller valgfri JSX.Element som en type (hvis det gir mening)?

Jeg kunne hoppe av og bruke any, men jeg vil vite den riktige typingen for dette scenariet.

Svar #1

Du kan bruke React.ReactNode for å typisere children-arrayen, hvorfor definerer du din egen?

interface IUploadFileButtonProps {
  children: React.ReactNode;
}

Relaterte artikler