登录（四）-高阶组件—— 本质上就是一个函数 & 用于向输入的组件中注入一些props参数

高阶组件—— 本质上就是一个函数 & 用于向输入的组件中注入一些props参数

高阶组件：本质上就是一个函数（该函数的参数是一个组件，返回值是另一个组件）

高阶组件一般用于向输入的组件中注入一些props

• 高阶组件基本用法

function withComponent (InputComponent) {
  let uname = '张三';
  let foo = (param) => {
    console.log(param)
  }
  return class extends React.Component {
    render () {
      return <InputComponent foo={foo} uname={uname}></InputComponent>
    }
  }
}
class Welcome extends React.Component {
  render () {
    // props中的数据来源于高阶组件
    let {uname, foo} = this.props
    return (
      <div>你好:{uname} <button onClick={()=>{
        foo('测试内容')
      }}>点击</button></div>
    )
  }
}
let MyWelcome = withComponent(Welcome)

高阶组件基本用法

• 高阶函数进阶用法

function withFormik (options) {
  // 这里return的函数其实才是高阶函数
  let { mapPropsToValues } = options
  let values = mapPropsToValues()
  return (InputComponent) => {
    return class extends React.Component {
      render () {
        return <InputComponent values={values}/>
      }
    }
  }
}
let MyWelcome = withFormik({
  mapPropsToValues: () => {
    return {
      username: '张三',
      password: '123456'
    }
  }
})(Welcome)

高阶组件用法