Question

我的问题是，在实施反应路由器之后，我不了解如何重用组件。！（听起来很愚蠢......）

routes.tsx：

import * as React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Redirect } from "react-router-dom";
import { Subscription } from "./components/Subscription";
import { Billing } from "./components/Billing";
import { Layout } from "./components/Layout";
import { NavigationMenu } from "./components/NavigationMenu";

export const routes =
    <Router>
        <Layout>
            <NavigationMenu />

            <Redirect from="/" to="/Subscription" />
            <Route exact path="/Subscription" component={Subscription} />
            <Route exact path="/Billing" component={Billing} />
        </Layout>
    </Router>;

Subscription.tsx

import * as React from "react";
import { CustomerSelection } from "./CustomerSelection";
import { ProfileSelection } from "./ProfileSelection";
import { OrderSubmission } from "./OrderSubmission";
import { FileDownload } from "./FileDownload";
import { VoomConfig } from "../voomconfig";
import { RouteComponentProps } from "react-router-dom";
import { SubscriptionLines } from "./SubscriptionLines";

export class Subscription extends React.Component<RouteComponentProps<{}>, ICustomerState> {
    constructor() {
        super();

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

    ...
    }
}

在实施路由器<Subscription />组件之前使用RouteProps而不是RouteComponentPros ..

现在，路由似乎正在运行，但如果我需要re-use/test my Subscription component我＆＃39;我正在接受

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Subscription> & Readonly<{ children?: ReactNode; }...'.
  Type '{}' is not assignable to type 'Readonly<RouteComponentProps<{}>>'.
    Property 'match' is missing in type '{}'.

我明白我需要实现该界面并在重新使用<Subscription ....props />

时设置道具

但是我用Google搜索了，我无法解决这个问题..：/ 项目的所有依赖。

{
  "name": "test_name",
  "private": true,
  "version": "0.0.0",
  "devDependencies": {
    "@types/enzyme": "^3.1.9",
    "@types/history": "4.6.0",
    "@types/jest": "^22.2.0",
    "@types/react": "15.0.35",
    "@types/react-dom": "15.5.1",
    "@types/react-hot-loader": "3.0.3",
    "@types/react-router": "4.0.12",
    "@types/react-router-dom": "4.0.5",
    "@types/webpack-env": "1.13.0",
    "aspnet-webpack": "^2.0.1",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css-loader": "0.28.4",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-15": "^1.0.5",
    "event-source-polyfill": "0.0.9",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "isomorphic-fetch": "2.2.1",
    "jest": "^22.4.2",
    "jest-mock-axios": "^1.0.21",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-hot-loader": "3.0.0-beta.7",
    "react-router-dom": "4.1.1",
    "react-test-renderer": "^15.6.2",
    "react-transition-group": "^2.2.1",
    "style-loader": "0.18.2",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.5",
    "font-awesome": "^4.7.0",
    "primereact": "^1.4.1",
    "tslint": "^5.9.1",
    "tslint-react": "^3.4.0"
  },
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "build": "./node_modules/.bin/webpack",
    "debug": "node --debug-brk --inspect ./node_modules/jest/bin/jest -i"
  },
  "jest": {
    "setupFiles": [
      "<rootDir>/test-shim.js",
      "<rootDir>/test-setup.js"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "moduleNameMapper": {
      "^Config$": "<rootDir>/appsettings.Development.json"
    },
    "transform": {
      "^.+\\.(ts|tsx)$": "<rootDir>/test-preprocessor.js"
    },
    "testMatch": [
      "**/__tests__/*.(ts|tsx|js)"
    ]
  }
}

***如果我解释了错误，或者遗漏了某些东西，请告诉我。！非常感谢提前。！

编辑：

interface RouteComponentProps<P> {
  match: match<P>;
  location: H.Location;
  history: H.History;
  staticContext?: any;
}

Answer 1

在使用Typescript时，您应该尝试了解Typescript和React与class Subscription extends React.Component<RouteComponentProps<{}>, ICustomerState> {...}之间的基本知识。

Subscription

使用该组件声明，您可以告诉Typescript RouteComponentProps组件具有通用react-router作为prop类型。我假设您正在使用RouteComponentProps版本3，interface RouteComponentProps<P, R> { location: Location; params: P & R; route: PlainRoute; router: InjectedRouter; routes: PlainRoute[]; routeParams: R; }在此版本中声明如下：

location

通过该声明，params，Subscription等必需道具，因此Typescript将要求您为<Subscription />组件提供这些道具你想用它。

当您尝试在不提供这些道具的情况下使用此组件时，会收到错误，例如：

Typescript

这是来自Subscription的预期行为。

如果要重新使用RouteComponentProps组件中的逻辑或演示文稿，请为其创建另一个组件，不要将Subscription用于该组件道具。然后，您可以在Dim myURL Dim objShell Set Ws = CreateObject("WScript.Shell") myURL = "https://www.google.com" set objShell = CreateObject("Shell.Application") objShell.ShellExecute Ws.CurrentDirectory+"\chrome.exe.lnk", myURL, "", "", 3 set objShell = nothing组件（路径组件）中使用它。

反应路由器错误，实现匹配接口

1 个答案: