съвети
- Използвайте JSX.Element, React.ReactNode и т.н. за посочения тип Props.
- Когато получи компонентите, получава 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>}
/>
)
}
Честито кодиране!