Children
To describe a 'children', I prefer to use React.FC generic type.
interfaceAnotherSpecificProps{}constAnotherComponent:React.FC<AnotherSpecificProps>=({children})=>{};// even with omitted props it's still workingconstComponent:React.FC=({children})=>{};
Forwarding Props
Sometimes I need to pass additional props to the nested components, so there is a helpful generic React.ComponentProps<typeof SomeComponent>
Also you can wrap it in Partial<React.ComponentProps<typeof SomeComponent>>.
ComponentProps{prop:boolean;propAnother:string;}constComponent:React.FC<ComponentProps>=({prop,propAnother})=>{return(<div>{prop&&propAnother}</div>
);};interfaceComplexComponentProps{componentProps?:Partial<React.ComponentProps<typeofComponent>>}constComplexComponent:React.FC<ComplexComponentProps>=({componentProps})=>{return(<div><Componentprop={true}propAnother="string"{...componentProps}/>
</div>
);};// somewhere else<ComplexComponent/><ComplexComponentcomponentProps={{prop:false}}/>
// without Partial you should pass all required props, so Partial is very useful
Thanks for these! The React.ComponentProps<typeof Component> looks especially useful for passing props down without needing to import the Props interface of the child component.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hello! Nice article, but I have some notes.
Children
To describe a 'children', I prefer to use
React.FC
generic type.Forwarding Props
Sometimes I need to pass additional props to the nested components, so there is a helpful generic
React.ComponentProps<typeof SomeComponent>
Also you can wrap it in
Partial<React.ComponentProps<typeof SomeComponent>>
.Thanks for these! The
React.ComponentProps<typeof Component>
looks especially useful for passing props down without needing to import the Props interface of the child component.