ReactJS TypeScript pure component with children
What's the right way to make a pure TypeScript React component capable of taking children just like a full class component would
Sample 🌹:
interface PrimitiveProps extends React.HTMLProps<HTMLDivElement>{ myAdditionalProp:any;};export const Content = (allProps: PrimitiveProps) => { const {myAdditionalProp, ...props} = allProps; return ( <div data-comment="Content" {...props}/>; );};Of course you are free to do whatever with myAdditionalProp and put in more props into PrimitiveProps if you want to. Just be sure to remove them from allProps before passing it throught. Note that children get passed as its a part of allProps and thus props.
Here is the complete example:
interface PaginationItemProps extends React.HTMLProps<HTMLDivElement> {}const PaginationItem = (props: PaginationItemProps) => { return <div>{props.children}</div>;}class Pagination extends React.Component<PaginationProps> { render() { return <div> <PaginationItem>CHILDREN RENDER</PaginationItem> </div> }}