新增庫依賴

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()
		      }}
		    ])
	}
 

高階元件

可以在原來函式的基礎上，外邊再包裹其他元件，用來對原先函式屬性的擴充套件
在一個函式中傳入一個引數，這個引數是一個元件，然後在新增其他元件後，返回新的元件

高階元件demo

• 屬性代理
• 反向繼承

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

屬性代理