ReactJS dattiloscritto con i bambini

Question

ho un componente TSX che è un contenitore avvolgendo i suoi figli in questo modo:

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>); 
    } 
} 

Ho anche qualche componenti puri, come questo:

// 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 non è possibile per la vita di me capire come fare un puro componente contenitore però. La dichiarazione sembra a posto e mostra nessun errore:

// 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 è React.ReactNode perché è quello che si trova in React.Props<X>.

Quando viene utilizzato ottengo TS2324 Proprietà 'figli' manca nel tipo 'IntrinsicAttributes & {label: string; bambini: ReactElement | stringa | numero | {} | (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>); 
} 

non posso dire qualcosa come il frammento di basso perché dirà Non riesci a trovare il simbolo 'LabelBox' nel modulo esterno _.tsx (è il file in cui tutti di questo codice è). non importa se ho messo la funzione o l'interfaccia prima, ma ci si sente male nel complesso comunque.

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>); 
} 

Qual è il modo giusto per fare un dattiloscritto pura Reagire componente in grado di prendere i bambini appena come una componente di classe completa sarebbe? È possibile? Non penso che non dovrebbe essere, è ancora una com stateless ponent e children sono solo un tipo speciale di props, in realtà il vero problema sembra essere lo strumento qui (Visual Studio) che non mappa il nodo di contenuto TSX al prop children.

Answer 1

Qual è il modo giusto per fare un dattiloscritto pura Reagire componente in grado di prendere i bambini, proprio come un componente a pieno classe sarebbe

Esempio:

interface PrimitiveProps extends React.HTMLProps<HTMLDivElement>{ 
    myAdditionalProp:any; 
}; 

export const Content = (allProps: PrimitiveProps) => { 
    const {myAdditionalProp, ...props} = allProps; 
    return (
     <div data-comment="Content" {...props}/>; 
    ); 
}; 

Naturalmente si è liberi di fare qualunque cosa con myAdditionalProp e mettere più oggetti di scena in PrimitiveProps se lo si desidera. Assicurati di rimuoverli da allProps prima di passarlo. Si noti che children viene passato come parte di allProps e quindi props.

Answer 2

Ecco l'esempio completo:

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> 
    } 
}