Question

我有这个钩子：

import { useEffect, useState } from 'react';
import { auth } from "../firebase/auth-service"

const useFirebaseAuthentication = () => {
   const [authUser, setAuthUser] = useState(null);

   useEffect(() => {
       const unlisten = auth.onAuthStateChanged(
           authUser => {
               authUser
                   ? setAuthUser(authUser)
                   : setAuthUser(null);
           },
       );
       return () => {
           unlisten();
       }
   });

   return authUser
}

export default useFirebaseAuthentication;

我是这样使用的：

const authUser = useFirebaseAuthentication();

有没有办法在基于类的组件中使用这个钩子 useFirebaseAuthentication()？

Answer 1

直接基于类的组件不支持 Hooks。

阅读React-FAQ

您可以创建一个 Higher Order Component，如下所示：

import React from 'react';
import { useFirebaseAuthentication} from '../hooks/useFirebaseAuthentication';

export const withFireBaseAuthHookHOC = (Component: any) => {
  return (props: any) => {
    const authUser = useFirebaseAuthentication();

    return <Component authUser ={authUser} {...props} />;
  };
};

现在只需使用此 HOC 包装基于类的组件。

.

有没有办法在基于类的组件中使用自定义钩子？

1 个答案: