javascript - 处理 'lambda in JSX attribute' 案例

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。