reactjs - Hur kan jag ge props till en TypeScript-komponent som skickas som en prop i React?

Jag har en komponent 'Modal.tsx' som jag vill använda innehåll från en annan komponent, liknande nedan.

<Modal onClose={() => setShowModal(false)} Content={ConfirmationContent} />

ConfirmationContent finns i sin egen ConfirmationContent.tsx-fil som importeras till Modal.tsx-filen.

Jag kan visa innehåll från ConfirmationContent-komponenten framgångsrikt inom Modal.tsx

type Props = {
  showModal : boolean,
  Content: React.ElementType,
}
const Modal = ({showModal, Content} : Props) => { 
  return (
    <div><Content /></div>
  )
}

Men det jag verkligen skulle vilja göra är att skicka props från föräldern av Modal.tsx till ConfirmationContent, typ så här ..

<Modal onClose={() => setShowModal(false)} Content={ConfirmationContent={text='hotpotato' closeModal={false} } />

Men jag har svårt att förstå hur man gör detta - Kan det vara React.ElementType?

All hjälp eller rådgivning här skulle verkligen uppskattas.

Svar #1

Ändra innehållet till barn på detta sätt:

type Props = {
  showModal : boolean,
  children?: React.ReactNode,
}
const Modal = ({showModal, children} : Props) => { 
  return (
    <div>{children}</div>
  )
}

Och sedan kan du skicka props som du vill på det här sättet:

<Modal onClose={() => setShowModal(false)}>
    <ConfirmationContent onClose={() => {//...}} text="foo" >
</Modal>

Relaterade artiklar