2017-12-23 7 views
1

HOC를 사용하는 구성 요소가 있습니다. HOC는 this.context를 필요로하지만 어떤 이유로 this.context가 전달되지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 타이컨텍스트가 내 HOC에 전달되지 않는 이유

구성 요소 :

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을 반환하는 경우 구성 요소의 I 출력.

내가 뭘 잘못하고 있니? 감사합니다

답변

1

ContextTypes는 당신이 wrappedComponent 인스턴스를 지정해야 HOC와 함께 사용하기 위해서는, 단지 NamePage 구성 요소에 대해 지정된

const WrappedNamePage = withTracking('View Page: NamePage')(NamePage); 

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

export default WrappedNamePage