web-dev-qa-db-ja.com

小道具で一致オブジェクトを参照するには、どのTypeScriptタイプを使用する必要がありますか？

Reactコンテナ/コンポーネントでは、React Router DOMに含まれるmatchパーツを参照するためにどのタイプを使用できますか？

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

export class ProductContainer extends React.Component<Props> {
  // ...
}
reactjstypescriptreact-router
36
Nicolas Blanco

明示的に追加する必要はありません。代わりに、RouteComponentProps<P>の@types/react-routerを小道具のベースインターフェイスとして使用できます。 Pは、マッチパラメータのタイプです。

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

interface MatchParams {
    name: string;
}

interface Props extends RouteComponentProps<MatchParams> {
}

// from typings
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;
}
75
Nazar554

上記の@ Nazar554の答えに追加するには、RouteComponentProps型をreact-router-domからインポートし、次のように実装する必要があります。

import {BrowserRouter as Router, Route, RouteComponentProps } from 'react-router-dom';

interface MatchParams {
    name: string;
}

interface MatchProps extends RouteComponentProps<MatchParams> {
}

さらに、再利用可能なコンポーネントを許可するために、render()関数を使用すると、RouteComponentProps全体ではなく、コンポーネントに必要なものだけを渡すことができます。

<Route path="/products/:name" render={( {match}: MatchProps) => (
    <ProductContainer name={match.params.name} /> )} />

// Now Product container takes a `string`, rather than a `MatchProps`
// This allows us to use ProductContainer elsewhere, in a non-router setting!
const ProductContainer = ( {name}: string ) => {
     return (<h1>Product Container Named: {name}</h1>)
}
6
The Aelfinn