react学习-高阶组件

1.简介
react高阶组件是一个函数，接收一个组件作为参数，返回一个新的组件，可以用来进行组件封装，将一些公共逻辑提取到高阶组件内部。
2.基本实现
以下案例为利用高阶组件来增强props

import React, { Component } from "react";

// 基础组件People
export class People extends Component {
  render() {
    return (
      <div>
        <h1>People</h1>
        <p>姓名：{this.props.name}</p>
        <p>年龄：{this.props.age}</p>
        <p>爱好：{this.props.hobby}</p>
      </div>
    );
  }
}

// 基础组件Boy
export class Boy extends Component {
  render() {
    return (
      <div>
        <h1>Boy</h1>
        <p>姓名：{this.props.name}</p>
        <p>年龄：{this.props.age}</p>
        <p>爱好：{this.props.hobby}</p>
      </div>
    );
  }
}

// 需求：给每个组件传多个props
// 用高阶组件实现
// 高阶组件
const PropsComponents = (Component) => {
  // 接受一个组件参数，将部分公共逻辑在这里处理&#