web-dev-qa-db-fra.com

Comment parcourir les enfants d'un composant dans TypeScript React?

Comment parcourir les enfants d'un composant React dans TypeScript tsx?

Ce qui suit serait valide jsx:

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

Cependant, dans TypeScript, le type de x est React.ReactElement<any> et je n’ai donc pas accès aux accessoires. Y a-t-il une sorte de casting que je dois faire?

reactjstypescriptreact-jsxtsx
10
CookieOfFortune

Cependant, dans TypeScript, le type de x est React.ReactElement, je n'ai donc pas accès aux accessoires. Y a-t-il une sorte de casting que je dois faire?

Oui. Préférez également le terme assertion. Un rapide:

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

L'utilisation de any devrait généralement être évitée car vous perdez les informations de type.

Utilisez plutôt React.ReactElement<P> dans le type de paramètre de fonction:

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