代码之家 › 专栏 › 技术社区 › temporary_user_name

如何在react组件的state或props类型中使用泛型类型?

typescript

temporary_user_name · 技术社区 · 4 年前

class Fetcher<T> extends React.Component<FetcherProps & { other: T }, FetcherState> {
  constructor(props: FetcherProps & { other: T }) {
    super(props);
  }
}

{ other: T } ,以至于它破坏了可读性。它是用于react render props的--我尝试一般地键入传递给子组件的数据。

T 当一个组件如此复杂和嵌套时,在props中为它键入什么?

作为参考,代码实际上如下所示:

class Fetcher<T> extends React.Component<FetcherProps & { children: (props: {data: T | null, reload: any, error: any, isLoading: boolean}) => React.ReactNode }, FetcherState> {

2 回复 | 直到 4 年前

smac89 4 年前

我会这样做:

type Props<T> = FetcherProps & { children: (props: {data: T | null, reload: any, error: any, isLoading: boolean}) => React.ReactNode };

class Fetcher<T> extends React.Component<Props<T>, FetcherState> {
  constructor(props: Props<T>) {
    super(props);
  }
}

temporary_user_name 4 年前

解决方案是在泛型组件之外创建泛型类型,并传递泛型类型。所以 FetcherProps & { other: T } ,我用这个:

type FetcherProps<T> = {
   /* non-generic property types omitted */
   other: T;
};

class Fetcher<T> extends React.Component<FetcherProps<T>, FetcherState> {

推荐文章

user3587624 · 禁用FluentUI React组件上的onClick事件

1 年前

Devmix · 如何在new Map()中保存状态?

1 年前

programmerGuy · 使用useState时获取不可分配给参数的接口

1 年前

Luisus · 从Prisma 5客户端提取类型

1 年前

Rostys · TypeScript:使用类型转换进行类型保护

1 年前

Raffaele · TS2304:当types.d.ts导出某些内容时,找不到名称ENDPOINT

1 年前

Anne · 类型不一致的对象的TypeScript类型定义

1 年前

tuimui · 使用react+ts通过道具传递数据

1 年前

FJ97 · 错误NullInjectorError:R3InjectorError(AppModule)[MatDialogConfig->MatDialogConfig]:

1 年前

Pooria Sadeghy · Vitest-类型错误:_ctx$t不是函数

1 年前