(二)高阶组件的应用-增强props

import React, { PureComponent, createContext } from 'react'

import { render } from 'react-dom'

 

// 定义一个高阶组件

function withUser(WrappedComponent){

    return props => {

        return (

            <UserContext.Consumer>

                {

                    user => {

                        return <WrappedComponent  {...props} {...user} /> 

                    }

                }

            </UserContext.Consumer>

        ) 

    }

}

//创建  Context

const UserContext = createContext({

    username:'Eric',

    level:15,

    region:'中国'

})

class Home extends PureComponent {

    render() {

        return  <h2> home: {`昵称:${this.props.nickname} 等级:${this.props.level} 区域:${this.props.region}`} </h2> 

    }

}

 

class About extends PureComponent {

    render() {

        return  <h2> About: {`昵称:${this.props.nickname} 等级:${this.props.level} 区域:${this.props.region}`} </h2> 

    }

}

class Detail extends PureComponent {

    render() {

        return (

            <div>

                <h2>Detail</h2>

                <ul>

                    <li>{this.props.nickname}</li>

                    <li>{this.props.level}</li>

                    <li>{this.props.region}</li>

                </ul>

            </div> 

        )  

    }

}

const UserHome = withUser(Home);

const UserAbout = withUser(About);

const UserDetail = withUser(Detail);

class App extends PureComponent {

    render() {

        return (

            <div>

                App:

                <UserContext.Provider value={{nickname:"Eric",level:18,region:"英国"}}>

                    <UserHome  />

                    <UserAbout />

                    <UserDetail />

                </UserContext.Provider>

               

            </div>

        )

    }

}

export default App 

 

---------