Sử dụng bộ phản ứng-bộ định tuyến với kiểu số

Question

Tôi đang cố gắng chuyển một ứng dụng phản ứng nhỏ sang dạng chữ.

Tôi đang gặp sự cố với bộ phản ứng-bộ định tuyến. Tôi có các định nghĩa mới nhất từ ​​chắc chắn gõ nhưng đoạn mã sau mang lại cho tôi lỗi:

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

Đây là những lỗi biên dịch tôi nhận được:

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. 

cách chính xác để khởi tạo một bộ react- là gì router tuyến đường bằng cách sử dụng typescript?

(Tôi nên làm rõ rằng tôi đang sử dụng một build nguyên cảo đêm trong đó có hỗ trợ cho JSX qua cờ --jsx react

Answer 1

Sai sót trong định nghĩa kiểu dường như là nguyên nhân. Bạn có thể làm việc xung quanh họ bằng cách sửa đổi .d.ts file như sau:

Trong react.d.ts, loại bỏ render từ giao diện JSX.ElementClass

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

Trong react-router.d.ts, thay đổi loại run phương pháp của routes tham số để React.ReactElement<RouteProp>

function run(routes: React.ReactElement<RouteProp>, callback: RouterRunCallback): Router; 
function run(routes: React.ReactElement<RouteProp>, location: LocationBase, callback: RouterRunCallback): Router; 

Answer 2

Vấn đề gốc rễ là một số định nghĩa trong phản ứng-router không có một phương pháp rõ ràng render(). Điều này đã được cố định (gián tiếp) bởi https://github.com/borisyankov/DefinitelyTyped/pull/5197

Lưu ý rằng mã này là không chính xác:

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

Nó nên là:

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

Vì Handler là một constructor cho một Phản ứng thành phần, không phải là một ví dụ của nó.

Answer 3

Đối với làm cho nó chạy dưới nguyên cảo 1.6 với phản ứng-router, tôi đã thêm đoạn mã sau trong file phản ứng-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>; 
}