如何为用户分析编写重新编写的HOC？

Question

I'm currently sending user analytic tracking events without a HOC like so:

import React from 'react';

class NamePage extends Component {

  componentDidMount() {
    this.context.mixpanel.track('View Page: NamePage');
  }
  render() {
  ...
  }
}

NamePage.contextTypes = {
    mixpanel: PropTypes.object.isRequired
};

export default NamePage;

Given 99% of my pages will require this track function, I'm learning that, I should wrap my pages in a recompose HOC.

Can do something like:

import React from 'react';
import withTracking from '../hoc/withTracking';

class NamePage extends Component {

  render() {
  ...
  }
}
export default withTracking(NamePage, {
  eventTitle: 'View Page: NamePage',
});

Is this possible? Am I setting this up correctly? Is there a better way to add a HOC for this purpose?

Thank you

Answer 1

Take a look at lifecycle method . It takes object with all lifecycle methods you want and returns a HOC that will add methods to the component.

I suggest you to change withTracking API slightly. You can make it composable by making withTracking a factory function with eventTitle argument.

 import React from 'react';
 import {lifecycle, compose} from recompose;

 export function withTracking(eventTitle) {
     return lifecycle({
         componentDidMount() {
             this.context.mixpanel.track(eventTitle);
         }
     });
 }

 const class NamePage extends Component {
     render(){
         ...
     }
 }

 export default withTracking('View Page: NamePage')(NamePage);

 // and now you can compose withTracking with some other HOCs if needed
 // for example:

 export default compose(
     withTracking('View Page: NamePage'),
     someAnotherHOC,
     someAnotherHOC2
 )(NamePage)