Reactjs 有没有一种方法可以在基于类的组件中使用自定义挂钩？

我有一个钩子：

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;

我是这样使用的：

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} />;
  };
};

const authUser=useFirebaseAuthentication（）

---

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

基于类的组件直接不支持钩子

阅读

您可以创建一个高阶组件，如下所示：

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} />;
  };
};

从“React”导入React；
从“../hooks/useFirebaseAuthentication”导入{useFirebaseAuthentication}；
export const with FireBaseAuthHookHoc=（组件：任意）=>{
返回（道具：任意）=>{
const authUser=useFirebaseAuthentication（）；
返回；
};
};

现在用这个

HOC

包装您的基于类的组件

---

.

如果您想知道如何在组件之间共享，请查看以下答案类的状态，这些状态相当于挂钩。您可以将一个钩子值共享给基于类的组件，但它们应该具有paent-child关系