typescript - 如何在 Typescript React 中遍历组件的子组件？

Question

我如何在 Typescript tsx 中遍历 React 组件的子组件？

以下是有效的 jsx:

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

然而，在 Typescript 中，x 的类型是 React.ReactElement<any>所以我无法使用 Prop 。我需要做某种转换吗？

Answer 1

使用 any通常应避免丢失类型信息。

改为使用 React.ReactElement<P>在函数参数类型中:

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