react-tour-guide改造成高级组件，给个思路

Question

想吧这个组件封装成一个高级组件但是失败。求指导
(老的：react-tour-guide)

import { Component } from "React";
import { Mixin as TourGuideMixin } from 'react-tour-guide';

var tour = {
  startIndex: 0,
  scrollToSteps: true,
  steps: [
    {
      text: 'This is the first step in the tour.',
      element: '.header',
      position: 'bottom',
      closeButtonText: 'Next'
    },
    {
      text: 'This is the second step in the tour.',
      element: '.footer',
      position: 'right'
    }
  ]
};
var cb = function() {
  console.log('User has completed tour!');
};

var Mixins = TourGuideMixin(tour, cb);

export const widthTour = (ComposedComponent) => class extends Component {
    constructor(props) {
      super(props);
    }
    //这里直接展开好像不行一个语法es5,一个es6.求如何改造
    //例如：...Mixins

    render() {
        return <ComposedComponent {...this.props} />;
    }
};

Answer 1

Higher Order Component 内部用ES5的语法

import React from 'react';
import { Mixin as tourGuideMixin } from 'react-tour-guide';
import 'react-tour-guide/dist/css/tour-guide.css';

var tour = {
  startIndex: 0,
  scrollToSteps: true,
  steps: [
    {
      text: 'This is the first step in the tour.',
      element: '.header',
      position: 'bottom',
      closeButtonText: 'Next'
    },
    {
      text: 'This is the second step in the tour.',
      element: '.footer',
      position: 'right'
    }
  ]
};
const cb = () => {
  console.log('User has completed tour!');
};

export default (ComposedComponent) => {
  return React.createClass({

    mixins: [tourGuideMixin(tour, cb)],

    render() {
      return (<ComposedComponent {...this.props}
                                 {...this.state} />);
    },
  });
};