react学习-高阶组件

原创

已于 2024-06-07 23:17:23 修改 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #javascript

于 2024-06-07 23:17:07 首次发布

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) => {
  // 接受一个组件参数，将部分公共逻辑在这里处理&#