首页 文章

使用react-router与typescript

提问于
浏览 次
10

我正在尝试将一个小型反应应用程序移植到打字稿上 .

我遇到了react-router的问题 . 我有明确类型的最新定义，但以下代码给出了错误：

var routes:Router.Route = (
<Route name="root" path="/" handler={MyApp}>
  <Route path="dashboard" handler={MyDash} />
  <DefaultRoute handler={SomeSection} />
  <NotFoundRoute handler={NotFoundPage} />
</Route>
);

Router.run(routes, function (Handler:React.Component<any, any>) {
  React.render(<Handler/>, document.body);
});

这些是我得到的编译错误：

js/app.tsx(31,3): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Component<RouteProp, any>'.
js/app.tsx(32,5): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
js/app.tsx(47,5): error TS2605: JSX element type 'Component<DefaultRouteProp, any>' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Component<DefaultRouteProp, any>'.
js/app.tsx(49,5): error TS2605: JSX element type 'Component<NotFoundRouteProp, any>' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Component<NotFoundRouteProp, any>'.
js/app.tsx(53,20): error TS2345: Argument of type '(Handler: Component<any, any>) => void' is not assignable to parameter of type '(Handler: RouteClass, state: RouterState) => void'.
  Types of parameters 'Handler' and 'Handler' are incompatible.
    Type 'Component<any, any>' is not assignable to type 'RouteClass'.
js/app.tsx(54,17): error TS2604: JSX element type 'Handler' does not have any construct or call signatures.

使用typescript初始化一组react-router路由的正确方法是什么？

（我应该澄清一下，我正在使用通过 --jsx react 标志支持JSX的夜间打字稿构建

typescript reactjs react-router

3 回答

  • 14

    根本问题是react-router中的一些定义没有显式的render（）方法 . 这已被（间接）修复https://github.com/borisyankov/DefinitelyTyped/pull/5197

    请注意，此代码不正确：

    Router.run(routes, function (Handler:React.Component<any, any>) {
  React.render(<Handler/>, document.body);
});

    它应该是：

    Router.run(routes, function (Handler: new() => React.Component<any, any>) {
  React.render(<Handler/>, document.body);
});

    因为 Handler 是React组件的构造函数，而不是它的实例 .

    回复于
  • 0

    类型定义中的错误似乎是原因 . 您可以通过修改 .d.ts 文件来解决它们，如下所示：

    在 react.d.ts 中，从 JSX.ElementClass 接口中删除 render

    interface ElementClass extends React.Component<any, any> {
}

    在 react-router.d.ts 中，将 run 方法的 routes 参数的类型更改为 React.ReactElement<RouteProp>

    function run(routes: React.ReactElement<RouteProp>, callback: RouterRunCallback): Router;
function run(routes: React.ReactElement<RouteProp>, location: LocationBase, callback: RouterRunCallback): Router;
    回复于
  • -1

    为了让它在带有react-router的typescript 1.6下运行，我在react-router.d.ts文件中添加了以下代码：

    interface RouterClass extends React.ComponentClass<any> {}

var Router: RouterClass;

//For Router

function createElement(

type: ReactRouter.RouterClass,

props: any,

...children: __React.ReactNode[]): ReactRouter.Router;

}

interface RouteProp {
    name?: string;
    path?: string;
    handler?: React.ComponentClass<any>;
    ignoreScrollBehavior?: boolean;
    component?: React.ComponentClass<any>;
}
    回复于

相关问题