javascript - 在类组件中使用 React 钩子
问题描述
我正在处理中等大小的项目,react 中的一些组件是使用类创建的,以及组件级别的状态。对于身份验证并将令牌保存在本地存储中并从中重新加载用户,我会使用挂钩。
我现在对这个决定感到后悔,就好像您要刷新一个类组件一样,您将失去用户并被踢回登录屏幕。
我知道钩子用于函数,但是有没有办法在类中使用钩子(太保留用户)?
//The hook I am using
useEffect(()=>{
auth.Context.loadUser();
//eslint-disable-next-line
},[]);
解决方案
根据 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}/>
}
推荐阅读
- python - 如何使用 Python 箭头语法调用函数
- android - 为什么在光标打开时并不总是触发 OnTouchEvent?
- asp.net-mvc - 单击后如何禁用asp-action链接
- python - 取消堆叠行标签(数据透视表)
- c# - 如何在非标准文件中嵌入元数据?
- html - 如何修复 w3.css 列表项中的高度偏移
- jquery - 如何增加连接的可排序列表的放置区域,但仍然从第一项增加列表高度
- java - 如何将一些值加载到对象数组的实例中?
- python - Question.objects.all() 没有返回预期的内容
- python - sklearn逻辑回归形状错误,但x,y形状一致