react项目实战五个人中心页面

最新推荐文章于 2023-02-10 14:47:29 发布

置顶

hewie_th

最新推荐文章于 2023-02-10 14:47:29 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： redux react

本文链接：https://blog.youkuaiyun.com/TH226/article/details/83270675

本文介绍了在React项目中实现个人中心页面的步骤，包括使用antd-mobile组件库，以及在退出登录时清除cookie中的用户ID和Redux状态。此外，探讨了高阶组件的概念，提供了一个高阶组件的示例链接，并简要提到了属性代理在组件继承中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新增库依赖

npm install browser-cookies --save 进行浏览器cookie的操作

个人中心页面

页面的开发没有什么难度，直接使用antd-mobile的组件即可

src\component\usercenter\usercenter.js

其中需要注意的是，个人中心页面的退出登录按钮，在退出登录的时候，同时清除cookie中的用户id。以及redux中的数据

logout(){
		const alert = Modal.alert

		alert('注销', '确认退出登录吗???', [
		      { text: '取消', onPress: () => console.log('cancel') },
		      { text: '确认', onPress: () => {
				  //清除cookie信息
				  browserCookie.erase('userid')
				  //清除redux中的数据
		      	this.props.logoutSubmit()
		      }}
		    ])
	}