12

我使用 react-router-dom 在我的主要 React 组件中遇到了很多相同的 TypeScritp 错误。所有子组件都返回错误：

error TS2322: Type 'typeof NotFound' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'.
  Type 'typeof NotFound' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'void | RouteComponentProps<any> | undefined' is not assignable to type '{} | undefined'.
        Type 'void' is not assignable to type '{} | undefined'.


error TS2322: Type 'typeof Index' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'.
  Type 'typeof Index' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Type 'Index' is not assignable to type 'Component<void | RouteComponentProps<any>, ComponentState>'.
      Types of property 'props' are incompatible.
        Type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>' is not assignable to type '(Readonly<{ children?: ReactNode; }> & void) | (Readonly<{ children?: ReactNode; }> & Readonly<Ro...'.
          Type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>' is not assignable to type 'Readonly<{ children?: ReactNode; }> & Readonly<RouteComponentProps<any>>'.
            Type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>' is not assignable to type 'Readonly<RouteComponentProps<any>>'.
              Property 'match' is missing in type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>'.

我的 Main.tsx 组件看起来像这样（所有其他 components.tsx 似乎编译没有问题）：

import * as React from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';

import Index from './Index';
import Explore from './Explore';
import NotFound from './NotFound';

class Main extends React.Component<{},{}> {

  render () {

    return (
      <Router>
          <Switch>
            <Route path="/" exact={true} component={Index} />
            <Route path="/explore/things/:id" component={Explore} />
            <Route component={NotFound} />
          </Switch>
      </Router>
    )

  }
}

export default Main;

谁能提供一些线索？

4

3 回答 3

12

这修复了编译错误（但会创建 tslint 违规）

<Route path="/" exact={true} component={Index as any} /> <Route path="/explore/things/:id" component={Explore as any} />

于 2017-04-29T02:17:12.243 回答
7

我这样做

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

class Index extends React.Component<RouteComponentProps<any>, {}> {...}

或者

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

interface Props extends RouteComponentProps<any> {...}
class Index extends React.Component<Props, {}> {...}
于 2017-05-02T23:23:19.380 回答
0

这可以通过通过箭头函数调用 Route 组件并props: any使用传播来解决：

<Route 
  path="/explore/things/:id"
  component={(props: any)=>
    <Explore {...props} user_role={this.state.user_role} />
  } />

这个方法很好，因为它允许你将额外的 props 传递user_role给 React 路由器子组件。

或者，更改@types/react-router-dom定义似乎摆脱了错误：

interface RouteProps {
    ...
    //component?: React.SFC<RouteComponentProps<any> | void> | React.ComponentClass<RouteComponentProps<any> | void>;
    component?: any;

但这似乎不是一个很好的解决方案。

于 2017-04-28T00:44:28.523 回答