如何在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 .有什么样的演员我需要做吗?

推荐答案

通常应该避免使用any,因为你会丢失类型信息.

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

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

Typescript相关问答推荐

扩展函数签名中的参数类型,而不使用泛型

如何通过TypeScript中的工厂函数将区分的联合映射到具体的类型(如类)?

在TypeScrip中分配回调时,参数的分配方向与回调本身相反.为什么会这样呢?

如何提取密钥及其对应的属性类型,以供在新类型中使用?

Vue SFC中的多个脚本块共享导入的符号

如何以Angular 形式显示验证错误消息

打字类型保护递归判断

通过按键数组拾取对象的关键点

我可以使用TypeScrip从字符串词典/记录中填充强类型的环境对象吗?

有什么方法可以类型安全地包装import()函数吗?

类型脚本可以推断哪个类型作为参数传递到联合类型中吗?

从非文字数组(object.keys和array.map)派生联合类型

创建一个函数,该函数返回一个行为方式与传入函数相同的函数

如何从JWT Reaction中提取特定值

可以用任意类型实例化,该类型可能与

带动态键的 TS 功能

如何为对象创建类型,其中键是只读且动态的,但值是固定类型?

Typescript,如何从对象的对象中获取分离的类型

从接口与类型字段的联合中提取,其中类型字段是枚举联合

无法通过 Prisma 使用 Next.js 13 api 路由从数据库中删除条目