如何将容器组件传递到 react-router-dom Route? [英] How to pass container components into react-router-dom Route?
问题描述
我目前在 react router redux 中传递正确类型时遇到打字稿问题.
I'm currently having typescript issue with passing the correct type in react router redux.
打字稿错误:
severity: 'Error'
message: 'Type '{ path: "/foo/:id"; component: typeof "<path>..' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'.
Type '{ path: "/foo/:id"; component: typeof "<path>..' is not assignable to type 'Readonly<RouteProps>'.
Types of property 'component' are incompatible.
Type 'typeof "<path>..' is not assignable to type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
Type 'typeof "<path>..' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'.
Type 'typeof "<path>..' provides no match for the signature 'new (props?: RouteComponentProps<any>, context?: any): Component<RouteComponentProps<any>, ComponentState>'.'
这似乎是因为我将容器组件传递到 <Route.../>
.但是,我不清楚为什么这不起作用,因为 mapsToProps 应该返回一个 RouteComponentProps.
This seems to be happening because I'm passing a container component into the <Route... />
. However, it's not clear to me why this wouldn't work because mapsToProps should be returning a RouteComponentProps.
Foo.ts(组件):
Foo.ts (Component):
export interface Props extends RouteComponentProps<any> {
a: string;
}
export class Foo extends React.Component<Props, void> {
public render() {
//code
}
}
FooContainer.ts:
FooContainer.ts:
function mapStateToProps(state: State, ownProps: Props): Props {
const mappedProps: Props = {
foo: "super"
};
return mappedProps;
}
export default connect(mapStateToProps)(Foo);
路线:
import * as React from "react";
import { Route, Switch } from "react-router-dom";
import FooContainer from "./FooContainer";
export const routes = (
<Switch>
<Route path="/foo/:id" component={FooContainer} />
</Switch>
);
nom 库/版本:
"@types/react": "^16.0.5",
"@types/react-dom": "^15.5.4",
"@types/react-redux": "4.4.40",
"@types/react-router-dom": "4.0.7",
"@types/react-router-redux": "5.0.8",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "5.0.4",
"react-router-dom": "4.2.2",
"react-router-redux": "5.0.0-alpha.6",
如果你看看我的 Props,它扩展了 RouteComponentProps,它是:
If you look at my Props, it extends RouteComponentProps which is:
export interface RouteComponentProps<P> {
match: match<P>;
location: H.Location;
history: H.History;
}
如果这是真的,mapStateToProps 不应该包含匹配项吗?
If that is true, shouldn't mapStateToProps contain the match?
推荐答案
所以我解决了这个问题:
So I got around the problem with :
export default connect(mapStateToProps)(foo) as React.ComponentClass<any>;
不知道为什么我需要用 React.ComponentClass 指定返回类型.不是隐含的吗?
Not sure why I need to specify the return type with React.ComponentClass. Isn't it implicit?
这篇关于如何将容器组件传递到 react-router-dom Route?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!