在类组件中使用 React 钩子 [重复]答案

【问题标题】：Using a React hook inside a class component [duplicate]在类组件中使用 React 钩子 [重复]
【发布时间】：2019-12-12 11:08:59
【问题描述】：

我正在做一个中等大小的项目，react 中的一些组件是使用类创建的，以及组件级别的状态。对于身份验证并将令牌保存在本地存储中并从中重新加载用户，我会使用挂钩。

我现在对这个决定感到遗憾，就好像您要刷新一个类组件一样，您将失去用户并被踢回登录屏幕。

我知道钩子用于函数，但有没有办法在类中使用钩子（也保留用户）？

//The hook I am using

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

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

你可以做的就是用一个函数式组件包装你的类组件，然后将 props 传递给它

例如：

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

【讨论】：

你救了我！！ :)