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

新增库依赖

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

个人中心页面

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

src\component\usercenter\usercenter.js

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

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

高阶组件

可以在原来函数的基础上，外边再包裹其他组件，用来对原先函数属性的扩展
在一个函数中传入一个参数，这个参数是一个组件，然后在添加其他组件后，返回新的组件

高阶组件demo

http://note.youdao.com/noteshare?id=8f9c84a2d4e97950a0f240bb1b988973&sub=8460618A34214528AB72D58E73ABF58E

属性代理
反向继承

D:\MyPracticeProject\react-muke\src\component\imooc-form\imooc-form.js

import React from 'react'
export default function imoocForm(Comp){return class WrapperComp extends React.Component{constructor(props){super(props)this.state = {}this.handleChange = this.handleChange.bind(this)}handleChange(key,val){// console.log(key,val);this.setState({[key]:val})}render(){return <Comp handleChange={this.handleChange} state={this.state} {...this.props}></Comp>}}
}

属性代理

react项目实战五个人中心页面相关推荐

06.简书项目实战三：详情页面和登录功能实现
简书项目实战三:详情页面和登录功能实现 1. 详情页面布局这部分的布局比之前的简单多了,就一个标题加上主要内容而已. export default class Detail extends Comp ...
机器学习项目实战(五) 住房价格预测
机器学习项目实战系列住房价格预测目录机器学习项目实战系列住房价格预测一.概述二.分析数据 1.数据导入 2.基础统计运算 3.特征观察 4.建立模型 5.分析模型表现 (1)学习曲 ...
React项目实战之租房app项目（十）个人中心模块登录访问控制项目打包部署上线
前言目录前言一.个人中心模块 1.1 个人中心模块效果图 1.2 个人中心模块基础布局 1.2 个人中心模块功能实现 1.2.1 判断用户是否登陆 1.2.2 退出功能二.登录访问控制 2.1 ...
react 项目实战（二）创建用户添加页面及 fetch请求 json-server db.json -w -p 8000...
1.安装路由 npm install -S react-router@3.x 2.新增页面我们现在的应用只有一个Hello React的页面,现在需要添加一个用于添加用户的页面. 首先在/src目 ...
react项目实战-好客租房
一.项目介绍好客租房-移动Web端项目介绍:本项目是一个在线租房项目,实现了类似链家等项目的功能,解决了用户租房的需求核心业务:在线找房(地图,条件搜索),用户登录,房源发布技术栈 React ...
08_心理咨询_微信小程序项目实战_关于我们页面静态效果实现
一.页面效果实现 1.1 页面结构在app.json里面的pages里面定义"pages/aboutUs/aboutUs" 1.定义一个view,给其添加id:qrCodeVie ...
React-Native 之项目实战(五)
前言本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关,如文中内 ...
【免费开放源码】审批类小程序项目实战（活动申请页面）
第一节:什么构成了微信小程序.创建一个自己的小程序第二节:微信开发者工具使用教程第三节:深入了解并掌握小程序核心组件第四节:初始化云函数和数据库第五节:云数据库的增删改查第六节:项目大纲以及 ...
【免费开放源码】审批类小程序项目实战（预约历史页面）
第一节:什么构成了微信小程序.创建一个自己的小程序第二节:微信开发者工具使用教程第三节:深入了解并掌握小程序核心组件第四节:初始化云函数和数据库第五节:云数据库的增删改查第六节:项目大纲以及 ...

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

新增库依赖

个人中心页面

高阶组件

高阶组件demo

属性代理

react项目实战五个人中心页面相关推荐

最新文章

热门文章

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

新增库依赖

个人中心页面

高阶组件

高阶组件demo

属性代理

react项目实战五 个人中心页面相关推荐

最新文章

热门文章

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

react项目实战五个人中心页面相关推荐