我有这个钩子:
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()?
答案 0 :(得分:2)
直接基于类的组件不支持 Hooks。
您可以创建一个 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
包装基于类的组件。
.