使用 RouteComponentProps 和自定义道具反应路由

Posted 2023-02-21

【中文标题】使用 RouteComponentProps 和自定义道具反应路由

【英文标题】：react routing using RouteComponentProps and custom props

【发布时间】：2019-01-02 12:39:44

【问题描述】：

我对这个问题感到疯狂..

首先，我还是 React 新手，其次，在发布之前，我尝试过： Passing custom props to router component in react-router v4 和 react Child component not receiving props

但是没有运气..

我想要实现的只是将路由添加到现有的 React 项目。

例如***（父）类如下所示：

import * as React from "react";
import  RouteProps  from "react-router";
import  IAppSettings, IAppConfig, IDataAccess  from "../interfaces";
import  AppConfig  from "../appconfig";
import  DataAccess  from "../DataAccess";
import  BookingSiteOverview  from "./BookingSiteOverview";

import  Layout  from "./Layout";
import  NavigationMenu  from "./NavigationMenu";
import  BrowserRouter as Router, Route, Link, Switch, Redirect  from "react-router-dom";
import  RouteComponentProps  from "react-router-dom";

    export class CJV extends React.Component<RouteComponentProps<>, > 
        private appConfig: IAppConfig;
        private dataAccess: IDataAccess;

        constructor() 
            super();

        const config: IAppSettings = require("Config");

        AppConfig.apiUrl = config.ApiUrl;

        this.appConfig = new AppConfig();
        this.dataAccess = new DataAccess(this.appConfig);
        this.dataAccess.getProfiles = this.dataAccess.getProfiles.bind(this);
    

    public render() 
        return <div>
            <Layout>
                <NavigationMenu />

                <Switch>
                    <Redirect exact=true from="/" to="/BookingSiteOverview" />
                    <Route path="/BookingSiteOverview" exact render=(props) =>
                        (<BookingSiteOverview getProfiles=this.dataAccess.getProfiles ...props />) />
                </Switch>


 </Layout>;
        </div>;
    

注意：错误位于 getProfiles=this.dataAccess.getProfiles “只读”类型上不存在属性“getProfiles” & 只读>'。

儿童班：

 import * as React from "react";
import  ProgressSpinner  from "primereact/components/progressspinner/ProgressSpinner";
import  RouteComponentProps  from "react-router-dom";

import  IBookingSiteOverviewState, IBookingSiteOverviewProps  from "../interfaces";
import  ProfileSelection  from "./ProfileSelection";
import  DateRangeSelection  from "./DateRangeSelection";
import  CollectionStatsTable  from "./CollectionStatsTable";
import  IBookingSiteCollectionStat, ICollectionStatHiddenColumnDefinition  from "../models";

export class BookingSiteOverview extends React.Component<RouteComponentProps<>, IBookingSiteOverviewState> 
    private stats?: IBookingSiteCollectionStat[];

    constructor(props: IBookingSiteOverviewProps) 
        super();

    this.state =  statsLoading: false, applyButtonPressed: false ;


public render() 
    const statsTable = this.state.statsLoading
        ? <ProgressSpinner />
        : <CollectionStatsTable
            id="booking-site-stats"
          getRowDefinition=this.props.getProfiles 
//<---- Displays error:     Property 'getProfiles' does not exist on type 'Readonly< children?: ReactNode; > & Readonly<RouteComponentProps<>>'.

            stats=this.stats
            statKey="bookingSiteId"
            rowExpansionTemplate=this.props.getProfiles
            tableWidth="1341px" />;

    const statsSection = this.state.applyButtonPressed ? statsTable : "";

    return <div>
        statsTable
    </div>;

所以我不知道如何传递自定义道具和反应路由道具，所以路由可以工作，子类接收它的属性..

【问题讨论】：

interface Props extends RouteComponentProps<> getProfiles: any;

【参考方案1】：

Typescript 中的 React 组件是这样定义的：

class ComponentName extends React.Component<PropsType, StateType> ...

在这种情况下，BookingSiteOverview 接受 RouteComponentProps 类型的道具并使用 IBookingSiteOverviewState 类型的状态。

RouteComponentProps 不包含 getProfiles 的定义，因此会导致错误。

编辑

getProfiles 在 IBookingSiteOverviewProps 中定义（根据 OP），因此将 BookingSiteOverview 的道具更改为 RouteComponentProps<> & IBookingSiteOverviewProps 可以解决问题：

export class BookingSiteOverview extends React.Component<RouteComponentProps<> & IBookingSiteOverviewProps, IBookingSiteOverviewState> 
    constructor(props: RouteComponentProps<> & IBookingSiteOverviewProps) 
        super(props);
        ...
    
    ...

【讨论】：

BookingSiteOverview 的构造函数接受 IBookingSiteOverviewProps 类型的 props，您是否可能只是忘记使用该接口作为组件的 props 类型？

抱歉回复晚了，我确实解决了这个问题，只是忘记更新 *** 了。如果我理解一切正确，反应路由需要 RouteComponentProps 并且我的组件需要 IBookingSiteOverviewProps，简单的工作..里面组件只是 React.Component<RouteComponentProps<> & IBookingSiteOverviewProps 当调用我的 BookingSiteOverview 组件时，除了它的道具，传递 ...props 进行路由。