高阶组件学习

一：高阶组件

高阶组件：一个函数接受一个组件或者多个组件作为他的输入，返回一个组件

二：应用

1：高阶组件基本使用:经过这个函数处理的组件 全都带了公共部分的组件

class Wrap extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 0
        }
    }
    render() {
        return (
            <div>
                1111
            </div>
        )
    }
}
// 高阶组件
function withCoptRight(WrapComponent) {
    return class  extends Component {
        render() {
            return <div>
                <WrapComponent></WrapComponent>
                <p>公共部分</p>
            </div>
        }
    }
}
export default withCoptRight(Wrap)

2：属性代理

class Wrap extends React.Component{
    render(){
        return <h1>App组件</h1>
    }
}
function HightOrderComponent(WrapComponent){
    return class extends Component{ // 返回了一个新的组件
        render(){
            let newProps ={
                msg:'高阶组件注入的新的属性',
                history:window.history
            }
            return <WrapComponent {...newProps}></WrapComponent>
        }
    }
}

export default HightOrderComponent(Wrap)

3：抽离state

// 抽离出来的input框非受控组件
const NameInput =(props)=>{
    return <inpit type='text' value={props.value} haldChange={props.haldChange} ></inpit>
}

// 高阶组件
function HightOrderComponent(){
    return class extends Component{ WrapComponent// 返回了一个新的组件
        state={
            value:''
        }
        haldChange(e){
            this.setState({
                value:e.target.value
            })
        }
        render(){
            return <WrapComponent value={this.state.value} onChange={this.haldChange}></WrapComponent>
        }
    }
}

// input 经过高阶组件包裹后变成受控组件
const WrapComponentInput = HightOrderComponent(NameInput)

// 原组件
class Wrap extends React.Component{
    render(){
        return <WrapComponentInput></WrapComponentInput>
    }
}

export default Wrap

5：属性代理之添加外部元素

class Demo extends React.Component{
    render(){
        return <div>
            <h1>DEMO组件</h1>
        </div>
    }
}
function withCoptRight(WrapComponent) {
    return class  extends Component {
        render() {
            return <div style={{width:'200px',height:'100px',background:'red'}}>
                <WrapComponent></WrapComponent>
            </div>
        }
    }
}

// 高阶组件处理后的组件
const WithCoptRightComponent = withCoptRight(Demo)


class Wrap extends React.Component{
    render(){
        return <div>
            <h1>App组件</h1>
            <Demo/>
            <WithCoptRightComponent></WithCoptRightComponent>
        </div>
    }
}
export default Wrap

6：应用-权限控制

class PageA extends React.Component{
    render(){
        return <div>
            <h1>pageA组件 管理员才可以访问,普通用户访问不到</h1>
        </div>
    }
}


class PageB extends React.Component{
    render(){
        return <div>
            <h1>pageB组件 管理员才可以访问，普通用户访问不到</h1>
        </div>
    }
}



function withAdmin(WithCoptRightComponent){
    return class extends Component{
        state={
            role:'admin',// user:普通用户 admin:管理员
        }
        render(){
            if(this.state.role === 'admin'){
                return <WithCoptRightComponent></WithCoptRightComponent>
            }else{
                return <div>'你没用权限访问该页面'</div>
            }

        }
    }

}
const WithAdminPageA = withAdmin(PageA)
const WithAdminPageB = withAdmin(PageB)

class Wrap extends React.Component{

    render(){
        return <div>
            <WithAdminPageA></WithAdminPageA>
            <WithAdminPageB></WithAdminPageB>
        </div>
    }
}
export default Wrap