我应该使用什么 TypeScript 类型来引用道具中的匹配对象? [英] What TypeScript type should I use to reference the match object in my props?

问题描述

在我的 React 容器/组件中，我可以使用哪种类型来引用 React Router DOM 包含的 match 部分?

In my React containers/component, which type could I use to reference the match part included by React Router DOM?

interface Props {
  match: any // <= What could I use here instead of any?
}

export class ProductContainer extends React.Component<Props> {
  // ...
}

推荐答案

您不需要明确添加它.您可以使用 @types/react-router 中的 RouteComponentProps

作为 props 的基本接口.P 是匹配参数的类型.

You don't need to add it explicitly. You can use RouteComponentProps<P> from @types/react-router as a base interface of your props instead. P is type of your match params.

import { RouteComponentProps } from 'react-router';

// example route
<Route path="/products/:name" component={ProductContainer} />

interface MatchParams {
    name: string;
}

interface Props extends RouteComponentProps<MatchParams> {
}

// from typings
import * as H from "history";

export interface RouteComponentProps<P> {
  match: match<P>;
  location: H.Location;
  history: H.History;
  staticContext?: any;
}

export interface match<P> {
  params: P;
  isExact: boolean;
  path: string;
  url: string;
}

这篇关于我应该使用什么 TypeScript 类型来引用道具中的匹配对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！