react 高阶组件

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/3594d59a8f52420b8bd85571dc7ae173.png