[英]React TypeScript HoC - passing Component as the prop
遵循本教程: https ://reacttraining.com/react-router/web/example/auth-workflow。
尝试重现代码:
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
在打字稿中:
import * as React from 'react';
import { Route, RouterProps } from 'react-router';
interface Props extends RouterProps {
component: React.Component;
}
const PrivateRoute = ({ component: Component, ...rest }: Props) => {
return (
<Route
{...rest}
render={(props) => <Component {...props} />}
/>
);
};
export default PrivateRoute;
但它总是会失败。 尝试了不同的变化。 我发布的是最新的一个。 得到:
在我看来,我必须为 Component 类型传递 Generic,但我不知道如何。
编辑:
到目前为止最接近的解决方案:
interface Props extends RouteProps {
component: () => any;
}
const PrivateRoute = ({ component: Component, ...rest }: Props) => {
return (
<Route
{...rest}
render={(props) => <Component {...props} />}
/>
);
};
接着:
<PrivateRoute component={Foo} path="/foo" />
你想传递一个组件构造函数,而不是一个组件实例:
import * as React from 'react';
import { Route, RouteProps } from 'react-router';
interface Props extends RouteProps {
component: React.ComponentType;
}
const PrivateRoute = ({ component: Component, ...rest }: Props) => {
return (
<Route
{...rest}
render={(props) => <Component {...props} />}
/>
);
};
export default PrivateRoute;
class Foo extends React.Component {
}
let r = <PrivateRoute component={Foo} path="/foo" />
编辑
更完整的解决方案应该是通用的,并使用RouteProps
代替RouterProps
:
import * as React from 'react';
import { Route, RouteProps } from 'react-router';
type Props<P> = RouteProps & P & {
component: React.ComponentType<P>;
}
const PrivateRoute = function <P>(p: Props<P>) {
// We can't use destructuring syntax, because : "Rest types may only be created from object types", so we do it manually.
let rest = omit(p, "component");
let Component = p.component;
return (
<Route
{...rest}
render={(props: P) => <p.component {...props} />}
/>
);
};
// Helpers
type Diff<T extends string, U extends string> = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T];
type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
function omit<T, TKey extends keyof T>(value:T, ... toRemove: TKey[]): Omit<T, TKey>{
var result = Object.assign({}, value);
for(let key of toRemove){
delete result[key];
}
return result;
}
export default PrivateRoute;
class Foo extends React.Component<{ prop: number }>{
}
let r = <PrivateRoute component={Foo} path="/foo" prop={10} />
经过几个小时的调查,这是符合我要求的解决方案:
import * as React from 'react';
import { Route, RouteComponentProps, RouteProps } from 'react-router';
const PrivateRoute: React.SFC<RouteProps> =
({ component: Component, ...rest }) => {
if (!Component) {
return null;
}
return (
<Route
{...rest}
render={(props: RouteComponentProps<{}>) => <Component {...props} />}
/>
);
};
export default PrivateRoute;
any
;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.