如何在 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>，所以我无法访问道具。我需要做某种转换吗？

Answer 1

However, in Typescript, the type of x is React.ReactElement so I have no access to props. Is there some kind of casting that I need to do?

是的。也更喜欢术语 assertion。一个快速的：

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

Answer 2

通常应避免使用 any，因为您会丢失类型信息。

而是在函数参数类型中使用React.ReactElement<P>：

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

How to iterate through a Component's Children in Typescript React?