在JSX属性中处理＆＃39; lambda＆＃39;案件

Question

现有代码：

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函数在这种情况下会是什么样子？

关于smth的想法：

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'

Answer 1

在你的情况下getComponent是一个lambda函数，由于(props) => () => ...而返回另一个lambda函数但不返回组件。修改您的getComponent功能，以便从render功能接收组件，如下所示。

const getComponent = (Component: Component) => (props: RouteComponentProps<{}>) => (
  <Component {...props} />
)

并修改此'＆＃39;渲染＆＃39;功能也是。

<Route
  {...rest}
  render={getComponent(Component)}
/>

注意：您收到的组件为component，其中c为Component，并且C的资本为EventEnqueuedUtcTime。