ReactJs -从HOC包装器访问包装状态

import React, { Component } from 'react';

// 定义一个HOC函数，接受一个组件作为参数，并返回一个新的包装组件
const withWrapper = (WrappedComponent) => {
  return class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        wrapperState: 'Wrapper State',
      };
    }

    render() {
      // 将包装状态作为props传递给原始组件
      return <WrappedComponent wrapperState={this.state.wrapperState} {...this.props} />;
    }
  };
};

// 原始组件
class MyComponent extends Component {
  render() {
    // 可以通过props访问包装状态
    const { wrapperState } = this.props;
    return <div>{wrapperState}</div>;
  }
}

// 使用HOC包装器包装原始组件
const WrappedComponent = withWrapper(MyComponent);

// 渲染包装后的组件
ReactDOM.render(<WrappedComponent />, document.getElementById('root'));