ReactJS TypeScript pure component with children

Question

I have a TSX component that is a container wrapping its children as follows:

import * as React from "react"; interface IProps extends React.Props<Box> { } interface IState { } export class Box extends React.Component<IProps, IState> { render() { return ( <div> <h3>Check this out:</h3> {this.props.children} </div>); } } 

I also have some clean components, such as:

 // ReSharper disable once InconsistentNaming - React components must start with a capital letter. export function LabelTest(props: { label: string }) { return ( <div style={{ display: "flex" }}> <label style={{ flex: "1 0 0" }}>{props.label}</label> <div style={{ width: "auto" }}> This is a pure component. </div> </div>); } 

I cannot let my life determine how to create a clean container component. The ad looks good and shows no errors:

 // ReSharper disable once InconsistentNaming - React components must start with a capital letter. export function LabelBox(props: { label: string, children: React.ReactNode }) { return ( <div style={{ display: "flex" }}> <label style={{ flex: "1 0 0" }}>{props.label}</label> <div style={{ width: "auto" }}> {props.children} </div> </div>); } 

children is React.ReactNode because this is what is in React.Props<X> .

When used, I get the "children" property TS2324 "missing" in type "IntrinsicAttributes" and {label: string; children: ReactElement | string | number | {} | (Reac ....

 // ReSharper disable once InconsistentNaming - React components must start with a capital letter. export function LabelNumberInput(props: { label: string, value: number }) { return ( <LabelBox label={props.label}> <input type="number" value={props.value} /> </LabelBox>); } 

I can’t say something like the fragment below, because it will say Unable to find the "LabelBox" symbol in the _.tsx external module (this is the file where all this code is located). It doesn’t matter if I first put the function or interface, but in any case it’s still not so.

 interface ILabelBoxProps extends React.Props<LabelBox> { label: string } export function LabelBox(props: ILabelBoxProps) { return ( <div style={{ display: "flex" }}> <label style={{ flex: "1 0 0" }}>{props.label}</label> <div style={{ width: "auto" }}> {props.children} </div> </div>); } 

What is the right way to create a clean TypeScript React component that can take children as a complete class component? Is it possible? I do not think this should not be, it is still a stateless component, and children is a special type of props , in fact, the real problem is presented here by a tool (Visual Studio) that does not display the TSX content of the node to children prop.

Answer 1

What is the right way to create a clean TypeScript React component that can take children as a complete class would be

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 can do everything with myAdditionalProp and insert more props into PrimitiveProps if you want. Just remember to remove them from allProps before passing it through tt. Note that children is passed as part of allProps and therefore props .

Answer 2

Here is a 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> } }