react 高阶组件-蒲公英云

react 高阶组件

你的名字 2021-07-24 17:11 576阅读 0赞

高阶组件必须是一个函数,且必须返回一个组件，参数也必须接收一个组件
作用:能对传入的组件进行一些限定操作,可以使用生命周期等

在这里插入图片描述
路由权鉴代码示例:
高阶组件

import React,{ Component} from 'react'
import { connect} from 'react-redux'
import { addFlashMessage} from '../actions/flashMessages'
import { withRouter} from 'react-router-dom'
export default function(ComposedComponent)
{ 
    class Authenticate extends React.Component{ 
        //第一次判断
        componentDidMount()
        { 
            if(!this.props.isAuth)
            { 
                this.props.addFlashMessage({ 
                    type:'danger',
                    text:'请先登录才能查看'
                })
                this.props.history.replace('/login')
            }
        }
        //中途退出，也无进入该页面的权鉴
        componentWillUpdate(nextProps)
        { 
            if(!nextProps.isAuth)
            { 
                this.props.history.push('/login')
            }
        }
        render()
        { 
            return(
                <ComposedComponent { ...this.props}/>
            )
        }
    }
    const mapStateToProps=(state)=>{ 
        return{ 
            isAuth:state.auth.isAuth
        }
    }
    return connect(mapStateToProps,{ addFlashMessage})(withRouter(Authenticate))
}

路由:

import React from 'react';
import { Route} from 'react-router-dom'
import App from './components/App'
import SignUp from './components/signup/signup'
import Login from './login/LoginPage'
import Shop from './shop/shoppage'
import requireAuth from './utils/requireAuth'
export default (
  <div className='container'>
    <Route path='/'  exact component={ App}></Route>
    <Route path='/signup' component={ ()=><SignUp/>}></Route>
    <Route path='/login' component={ ()=><Login/>}></Route>
    <Route path='/shop' component={ requireAuth(Shop)}></Route>
  </div>
)
// component={()=>{requireAuth(Shop)}}