Question

我正在寻找包装组件的示例，我可以将其包装在私人页面上并在那里进行用户身份验证。我在下面找到了这个示例，它运行良好，但是当我在控制台中运行“npm run build”时出现了一些问题。我不完全理解下面的这个组件，因为它广泛使用了 typescript 的通用功能：

const withAuth =
  <PageProps extends Record<string, unknown>>(Page: NextPage<PageProps>): 
  NextPage<PageProps> => ({ ...props }) => {
    const { keycloak, initialized } = useKeycloak<KeycloakInstance>();

    useEffect(() => {
      if (initialized && !keycloak?.authenticated) {
        keycloak?.login();
      }
    }, [initialized, keycloak?.authenticated]);

    return (
      <>
        {initialized && keycloak?.authenticated && (
          <Page {...(props as PageProps)} />
        )}
      </>
    );
  };

export default withAuth;

当我在控制台执行“npm run build”命令时，有两个问题：

<块引用>

警告：缺少函数的返回类型。错误：组件定义缺少显示名称

如何定义该函数的返回类型以及如何解决缺少显示名称的问题？而且，这个例子可以以某种方式简化以避免打字稿的通用特性吗？

顺便说一句。我在 nextjs 中又找到了一个父组件的例子，它的工作方式似乎与上面的相同，但看起来更简单：

const withAuth = (WrappedComponent) => {
  return (props) => {
        const { keycloak, initialized } = useKeycloak<KeycloakInstance>();

        useEffect(() => {
          if (initialized && !keycloak?.authenticated) {
            keycloak?.login();
          }
        }, [initialized, keycloak?.authenticated]);

        return (
          <>
            {initialized && keycloak?.authenticated && (
              <WrappedComponent />
            )}
          </>
        );
    }

    return null;
  };
};

export default withAuth;

在 NextJs 中创建父 HOC 组件（提供了 nextjs + typescript 示例）

0 个答案: