已有代码:
const FooRoute: React.SFC<RouteProps> =
({ component: Component, ...rest }) => {
if (!auth.isFoo()) {
return <Redirect to={{ pathname: '/404' }} />;
}
if ('render' in rest) {
return (
<Route {...rest} render={rest.render} />
);
} else {
return (
Component
?
<Route
{...rest}
render={
(props: RouteComponentProps<{}>) => <Component {...props} />}
/>
: null
);
}
};
这里有错误:
现在 getComponent
函数在这种情况下会是什么样子?
想了想:
const getComponent = (props: RouteComponentProps<{}>) => () => (
<Component {...props} />
)
然后可以简单地:
<Route
{...rest}
render={getComponent}
/>
但在这种情况下,Component
是未定义的。有什么线索吗?
编辑: 重要说明 - 使用 TypeScript。因此必须以某种方式将组件向下传递到 getComponent
。
EDIT2:我使用双 lambda 的原因是因为它允许处理这样的情况:
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => (foo: string) => {
...
}
与
<button onClick={handleClick('bar')} ... // foo === 'bar'
最佳答案
在您的例子中,getComponent
是一个 lambda 函数,它返回另一个 lambda 函数但不是组件,因为 (props) => () => ...
。修改您的 getComponent
函数以从 render
函数接收组件,如下所示。
const getComponent = (Component: Component) => (props: RouteComponentProps<{}>) => (
<Component {...props} />
)
并修改这个“渲染”函数。
<Route
{...rest}
render={getComponent(Component)}
/>
注意:您正在接收组件作为 component
和小 c
并将其用作 Component
大写 C
。
关于javascript - 处理 'lambda in JSX attribute' 案例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50830061/