Higher-order Components

Enhance.js

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: 'Hello' };
  }
  render() {
    return <ComposedComponent {...this.props} data={this.state.data} />;
  }
};

EnhancerContainer.js

export class EnhancerContainer extends Component {
  constructor() {
    this.state = { data: 'hello' };
  }
  renderChildren: function () {
    return React.Children.map(this.props.children, function (child) {
      return React.addons.cloneWithProps(child, {
        data: this.state.data
      })
    }.bind(this))
  },
  render() {
    return (<div>
      {this.renderChildren()）}
    </div>)
  }
};

HigherOrderComponent.js

import { Enhance } from "./Enhance";

class MyComponent {
  render() {
    if (!this.data) return <div>Waiting...</div>;
    return <div>{this.data}</div>;
  }
}

export default Enhance(MyComponent); // Enhanced component

// vs
<EnhancerContainer>
  <MyComponent />
</EnhancerContainer>