React higher-order component

inject.js

import React, { Component, cloneElement } from 'react';
import ReactDOM from 'react-dom';

const injectRender = Decorated => {
  class Inject extends Decorated {
    render() {
      const renderElement = super.render();
      const children = React.Children
        .map(renderElement.props.children, child => {
          if (typeof child === 'string') {
            return child;
          } else {
            return cloneElement(child);
          }
        })
        .concat('inject children');

      return cloneElement(renderElement, {}, children);
    }
  }
  return Inject;
};

class ClassDemo extends Component {
  render() {
    const props = this.props;
    return (
      <div>
        {props.content ? props.content : '我是一个普通组件'}
        {props.children}
      </div>
    );
  }
}

ReactDOM.render(
  <InjectDemo>
    <div>Test Of Class</div>
  </InjectDemo>,
  document.getElementById('app')
);

pp.js

import React, { Component, cloneElement } from 'react';
import ReactDOM from 'react-dom';

// 就像vue的filter
const reverse = str => str.split('').reverse().join('');

const withHeader = Decorated => props => {
  const { title, ...rest } = props;
  return (
    <div>
      <h3>
        {title ? title : '我是标题'}
      </h3>
      <Decorated {...rest} />
    </div>
  );
};

const Demo = props =>
  <div>
    {props.content ? props.content : '我是一个普通组件'}
    {props.children}
  </div>;

const EnhanceDemo = withHeader(Demo);

ReactDOM.render(
  <EnhanceDemo title="高阶组件" content={reverse('我是一个普通组件')}>
    <div>Test</div>
  </EnhanceDemo>,
  document.getElementById('app')
);