想吧这个组件封装成一个高级组件但是失败。求指导
(老的: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} />;
}
};
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} />);
},
});
};