javascript - Text i JSX har typen 'string', men den förväntade typen för 'children' är 'string | Element | Element[]'

Jag har en anpassad React-knappkomponent som jag vill ska kunna ta valfria strängar med eller utan valfria ikoner (JSX.Element) som barn.

Mitt gränssnitt ser ut så här

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

Och 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>

Jag får detta felmeddelande:

Text i JSX har typen 'string', men den förväntade typen för 'children' är 'string | Element | Element[]'

Vilket jag antar beror på att Typescript förväntar sig en av typerna, men inte mer än en typ åt gången.

Hur kan jag specificera en valfri sträng och/eller valfria JSX-element som en typ (om det överhuvudtaget är meningsfullt)?

Jag skulle kunna hoppa av och använda any, men jag vill veta den korrekta typen för detta scenario.

Svar #1

Du kan använda React.ReactNode för att typa children-arrayen, varför definierar du din egen?

interface IUploadFileButtonProps {
  children: React.ReactNode;
}

Relaterade artiklar