reactjs - Cum să parcurgi Children-ii unui Component în Typescript React?

Cum pot itera prin copiii unui component React în Typescript tsx?

Următorul ar fi jsx valid:

public render() {
    return (
        <div>
            {React.Children.map(this.props.children, x => x.props.foo)}
        </div>
    );
}

Totuși, în Typescript, tipul lui x este React.ReactElement<any>, așa că nu am acces la props. Trebuie să fac vreun fel de conversie?

Răspuns #1

Utilizarea any ar trebui în general evitată deoarece pierzi informațiile despre tip.

În schimb, folosește React.ReactElement<P> în tipul parametrului funcției:

React.Children.map(this.props.children, (child: React.ReactElement<ChildPropTypes>) => child.props.bar)

Răspunsul #2

Totuși, în Typescript, tipul lui x este React.ReactElement, așa că nu am acces la props. Există vreun fel de conversie pe care trebuie să o fac?

Da. Prefer de asemenea termenul assertion. Unul rapid:

React.Children.map(this.props.children, x => (x as any).props.foo)