处理“JSX 属性中的 lambda”案例

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

想一想：

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 函数，它返回另一个 lambda 函数，但由于 (props) => () => ... 而不是组件。修改您的 getComponent 函数以从 render 函数接收组件，如下所示。

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

并修改此“渲染”功能。

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

注意：您收到的组件为component，小号c，并将其用作Component，大写C。