![](/img/trans.png)
[英]Missing the location, history and match properties when combining custom props with RouteComponentProps
[英]react routing using RouteComponentProps and custom props
我对这个问题感到疯狂..
首先,我还是React的新手,其次,在发布之前,我尝试过:将自定义道具传递给react-router v4中的路由器组件,而react子组件不接收道具
但是没有运气..
我要实现的目标只是将路由添加到现有的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'在类型'Readonly <{children ?: ReactNode;上不存在。 }>和只读>'。
子班:
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>;
}
}
因此,我无法弄清楚如何传递自定义道具,并对路由道具做出反应,以便路由可行,子类将接收其属性。
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);
...
}
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.