소품에서 일치 개체를 참조하려면 어떤 TypeScript 유형을 사용해야 합니까?

소품에서 일치 개체를 참조하려면 어떤 TypeScript 유형을 사용해야 합니까?

My React 컨테이너/컴포넌트에서 어떤 유형을 사용하여matchReact Router DOM에 포함된 부품은 무엇입니까?

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

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

명시적으로 추가할 필요는 없습니다.사용할 수 있습니다.RouteComponentProps<P>부터@types/react-router대신 소품 베이스 인터페이스로 사용할 수 있습니다. P매치 파라미터 유형입니다.

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;
}

위의 @Nazar554의 답변에 추가하자면,RouteComponentProps유형을 Import해야 합니다.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>)
}

심플한 솔루션

import { RouteComponentProps } from "react-router-dom";

const Container = ({ match }: RouteComponentProps<{ showId?: string}>) => {
 const { showId } = match.params?.showId;//in case you need to take params
}

이 문제는, 의 인터페이스를 작성한 후에도,match<Params>유형 경고는 여전히 거기 있었다.다음은 나에게 효과가 있었던 코드입니다.

interface MatchParams {
    firstParam: string;
    optionalParam?: string;
}

export const CreditPortfolioDetail: FC<RouteComponentProps<MatchParams>> = (props) => {
    const { firstParam, optionalParam} = props.match.params; 
    // ...
}

이것은 제가 테스트한 완전한 예입니다.

Demo Component.tsx

// Created by BaiJiFeiLong@gmail.com at 2021/9/25 20:15

import React from "react";
import {RouteComponentProps} from "react-router"

export default class DemoComponent extends React.Component<{
    prop1: string,
    prop2: string,
    prop3: string
} & RouteComponentProps<{
    param1: string,
    param2: string,
    param3: string
}>, {
    state1: string,
    state2: string,
    state3: string
}> {

    static defaultProps = {
        prop1: "PROP1",
        prop2: "PROP2",
        prop3: "PROP3"
    }

    constructor(props: any) {
        super(props);
        this.state = {
            state1: "STATE1",
            state2: "STATE2",
            state3: "STATE3"
        }
    }


    render() {
        return <ul>
            <li>prop1 = {this.props.prop1}</li>
            <li>prop2 = {this.props.prop2}</li>
            <li>prop3 = {this.props.prop3}</li>
            <li>state1 = {this.state.state1}</li>
            <li>state2 = {this.state.state2}</li>
            <li>state3 = {this.state.state3}</li>
            <li>param1 = {this.props.match.params.param1}</li>
            <li>param2 = {this.props.match.params.param2}</li>
            <li>param3 = {this.props.match.params.param3}</li>
        </ul>
    }
}

루트

<Route exact path="/demo/:param1/:param2/:param3" component={DemoComponent}/>

콜

/demo/foo/bar/baz

결과

prop1 = PROP1
prop2 = PROP2
prop3 = PROP3
state1 = STATE1
state2 = STATE2
state3 = STATE3
param1 = foo
param2 = bar
param3 = baz

언급URL : https://stackoverflow.com/questions/48138111/what-typescript-type-should-i-use-to-reference-the-match-object-in-my-props