在类组件内部使用React钩子

时间:2019-08-04 20:12:40

标签: javascript reactjs react-hooks

我正在研究中型项目,并且使用类以及组件级别状态创建了React中的某些组件。为了进行身份验证并将令牌保留在本地存储中并从中重新加载用户,我将使用钩子。

现在我很后悔这个决定,就好像您要刷新类组件一样,您会失去用户并被踢回到登录屏幕。

我知道钩子用于函数,但是有没有办法在类中使用钩子(使用户无法使用)?

//The hook I am using

useEffect(()=>{
auth.Context.loadUser();
//eslint-disable-next-line
},[]);

1 个答案:

答案 0 :(得分:0)

根据React文档,您不能在类组件内部使用钩子:
https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

您可以做的是将类组件与功能组件包装在一起,并向其传递道具

例如:

class MyClass extends React.Component{
  render(){
    <div>{this.props.user}</div>
  }
}

const funcComp = () => {
  const [user, setUser] = useState();

  useEffect(() => {
    auth.Context.loadUser().then(user => setUser(user))
  }, [setUser]);

  return <MyClass user={user}/>
}