съвети

  1. Използвайте JSX.Element, React.ReactNode и т.н. за посочения тип Props.
  2. Когато получи компонентите, получава props като аргумент и извлича компонента от props. Когато създавате функционален компонент, props често се записват като ({child1, child2}) и т.н. в аргумента, но трябва да бъде (props) (вероятно поради рендиране).

Код

Да предположим, че компонент, наречен Children, получава компонентите с имена на подпори child1 и child2.

import React from 'react'

type Props = {
  child1: JSX.Element
  child2: JSX.Element
}

export default Children: React.FC<Props> = (props) => {
  const { child1, child2 } = props 

  return (
    <div>
      {child1}
      <div>{child2}</div>
    </div>
  )
}

Когато се използва компонентът Children, посочете всеки проп както обикновено.

import React from 'react'

export default Parent: React.FC = () => {
  return (
    <Children
      child1 = {<div>child1</div>}
      child2 = {<div>child2</div>}
    />
  )
}

Честито кодиране!