reactjs - 如何在 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>所以我无法访问道具。我需要做某种类型的演员吗？

score 24 · Accepted Answer

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

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

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

score 20 · Accepted Answer

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

是的。也更喜欢这个词assertion。一个快速的：

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

2 回答 2