使用 RouteComponentProps 和自定义道具反应路由 [英] react routing using RouteComponentProps and custom props

问题描述

我对这个问题很着迷..

首先，我还是 React 的新手，其次，在发布之前，我尝试了:在 react-router v4 中将自定义道具传递给路由器组件和反应子组件未收到道具>

但没有运气..

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

例如顶级(父)类看起来像这样:

import * as React from "react";从反应路由器"导入 { RouteProps };import { IAppSettings, IAppConfig, IDataAccess } from "../interfaces";import { AppConfig } from "../appconfig";从../DataAccess"导入{数据访问}；从./BookingSiteOverview"导入 { BookingSiteOverview };从./Layout"导入{布局}；从./NavigationMenu"导入 { NavigationMenu };import { BrowserRouter as Router, Route, Link, Switch, Redirect } from "react-router-dom";从react-router-dom"导入 { RouteComponentProps };导出类 CJV 扩展了 React.Component, {}>{私有 appConfig:IAppConfig；私有数据访问:IDataAccess；构造函数(){极好的();const 配置: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);}公共渲染(){返回 
<布局><导航菜单/><开关><重定向精确={true} from="/" to="/BookingSiteOverview"/><Route path="/BookingSiteOverview" 精确渲染={(props) =>(<BookingSiteOverview getProfiles={this.dataAccess.getProfiles} {...props}/>)}/></开关></布局>;
;}

注意:错误位于 getProfiles={this.dataAccess.getProfiles}属性 'getProfiles' 不存在于类型 'Readonly<{ children?: ReactNode;}> &只读>'.

子类:

 import * as React from "react";从primereact/components/progressspinner/ProgressSpinner"导入{ProgressSpinner}；从react-router-dom"导入 { RouteComponentProps };import { IBookingSiteOverviewState, IBookingSiteOverviewProps } from "../interfaces";从 "./ProfileSelection" 导入 { ProfileSelection };import { DateRangeSelection } from "./DateRangeSelection";从./CollectionStatsTable"导入{ CollectionStatsTable };import { IBookingSiteCollectionStat, ICollectionStatHiddenColumnDefinition } from "../models";导出类 BookingSiteOverview 扩展 React.Component, IBookingSiteOverviewState>{私人统计数据?:IBookingSiteCollectionStat[];构造函数(道具:IBookingSiteOverviewProps){极好的();this.state = { statsLoading: false, applyButtonPressed: false };}公共渲染(){const statsTable = this.state.statsLoading?<ProgressSpinner/>: <CollectionStatsTableid="预订站点统计信息"getRowDefinition={this.props.getProfiles}//<---- 显示错误:属性 'getProfiles' 不存在于类型 'Readonly<{ children?: ReactNode;}>&只读>'.统计={this.stats}statKey="bookingSiteId"rowExpansionTemplate={this.props.getProfiles}tableWidth="1341px"/>;const statsSection = this.state.applyButtonPressed ?统计表:"；返回 
{统计表}
;}

}

所以我无法弄清楚，如何传递自定义道具，并对路由道具做出反应，因此路由会起作用，并且子类接收其属性..

解决方案

Typescript 中的 React 组件定义如下:

class ComponentName extends React.Component{ ... }

在这种情况下，BookingSiteOverview 接受 RouteComponentProps<{}> 类型的道具并使用 IBookingSiteOverviewState 类型的状态.

RouteComponentProps<{}> 不包含 getProfiles 的定义，因此会导致错误.

编辑

getProfiles 在 IBookingSiteOverviewProps 中定义(根据 OP)，因此将 BookingSiteOverview 的道具更改为 RouteComponentProps<{}>&IBookingSiteOverviewProps 解决了这个问题:

导出类 BookingSiteOverview 扩展 React.Component&IBookingSiteOverviewProps、IBookingSiteOverviewState>{构造函数(道具:RouteComponentProps<{}> & IBookingSiteOverviewProps){超级(道具)；...}...}

Getting crazy about this issue I have..

Firstly, I am still new to React, secondly, before posting, I tried: Passing custom props to router component in react-router v4 and react Child component not receiving props

But no luck..

what I am trying to achieve, is simply add routing to existing React project.

For example top (father) class looks like this:

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

NOTE: error is at getProfiles={this.dataAccess.getProfiles} Property 'getProfiles' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly>'.

Child class:

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

}

So I cannot figure out, how to pass custom props, and react routing props, so routing would work, and child class receives its properties..

解决方案

A React component in Typescript is defined like this:

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

In this case BookingSiteOverview accepts props of type RouteComponentProps<{}> and uses a state of type IBookingSiteOverviewState.

RouteComponentProps<{}> does not include a definition for getProfiles, so that is causing the errors.

EDIT

getProfiles is defined in IBookingSiteOverviewProps (per the OP) so changing the props for BookingSiteOverview to RouteComponentProps<{}> & IBookingSiteOverviewProps resolves the issue:

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

这篇关于使用 RouteComponentProps 和自定义道具反应路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！