web-dev-qa-db-ja.com

TypeScript Reactでコンポーネントの子を反復する方法は？

TypeScript tsxでReactコンポーネントの子を反復処理する方法を教えてください。

以下は有効なjsxです：

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

ただし、TypeScriptでは、xの型はReact.ReactElement<any>したがって、私は小道具にアクセスできません。私がやらなければならないキャストの種類はありますか？

reactjstypescriptreact-jsxtsx
14
CookieOfFortune

型情報が失われるため、anyの使用は通常避けてください。

代わりにReact.ReactElement<P>関数パラメータタイプ：

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

ただし、TypeScriptでは、xの型はReact.ReactElementであるため、小道具にアクセスできません。私がやらなければならないキャストの種類はありますか？

はい。 assertionという用語もお勧めします。簡単なもの：

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