reactjs - 有没有办法可以在基于类的组件中使用自定义 Hook ？

Question

我有这个钩子(Hook):

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();
有没有办法可以在基于类的组件中使用这个钩子(Hook) 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 包装你的基于类的组件.
.