[react] 举例说明什么是高阶组件(HOC)的反向继承

import React from 'react';

const hoc = (WrappedComponent) => {
  // 集成需要包装的 Component
  return class extends WrappedComponent {
    constructor(props) {
      super(props);
    }
    // 重写 component 生命周期
    componentDidMount() {
      console.log('----> hoc didmount');
    }
    // render 继续使用被包装的 Component 的 render 方法
    render() {
      return super.render();
    }
  }
}

class Title extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    console.log('---> title didmount');
  }
  render() {
    return <h1>{this.props.title}</h1>
  }
}

export default () => {
  const HOCComponent = hoc(Title);
  return <HOCComponent title={'title'} />
}

 个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

标签：return,HOC,render,hoc,Component,react,props,举例说明
来源： https://blog.csdn.net/weixin_43392489/article/details/121437055