我有一个正在使用HOC的组件。 HOC需要this.context,但是由于某些原因,this.context没有被传递。我究竟做错了什么? ty
零件:
import React, { Component } from 'react';
import withTracking from './hocs/withTracking';
class NamePage extends Component {
componentDidMount() {
console.log(this.context.mixpanel) // WORKS
}
render() {
return (
...
);
}
}
NamePage.contextTypes = {
mixpanel: PropTypes.object.isRequired
};
export default withTracking('View Page: NamePage')(NamePage);
临时的
import { lifecycle } from 'recompose';
export function withTracking(eventTitle) {
return lifecycle({
componentDidMount() {
console.log(this.context.mixpanel) // UNDEFINED - fail-y?
}
});
}
export default withTracking;
如果我在组件中输出,console.log将返回
undefined
,其中它返回正确的值。我究竟做错了什么?谢谢
最佳答案
仅为ContextTypes
组件指定NamePage
,为了使它与HOC一起使用,需要在wrappedComponent实例上指定它
const WrappedNamePage = withTracking('View Page: NamePage')(NamePage);
WrappedNamePage.contextTypes = {
mixpanel: PropTypes.object.isRequired
};
export default WrappedNamePage