如何在Typescript React中遍历Component的子节点？

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>，因此我无法访问props。我需要做某种铸造吗？

Answer 1

  

但是，在Typescript中，x的类型是React.ReactElement，所以我无法访问props。我需要做某种铸造吗？

是。也更喜欢术语React.Children.map(this.props.children, x => (x as any).props.foo) 。一个快速的：

re.findall("\d{2}-\d{8}", line)

Answer 2

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

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

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