HOC를 컨텍스트로 변환하여 순수한 함수로 변환

Question

정말 간단 할 HOC를 만들려고합니다. 랩 된 컴퍼넌트에 문맥으로부터 소품을 추가합니다.

나는이 방법으로 그렇게 할 수 있었다 : 난 그냥 렌더링() 메소드를 갖고 있기 때문에

const WithForm = WrappedComponent => class extends Component { 
    static contextTypes = { 
    ctx: PropTypes.object 
    }; 
    render() { 
    return <WrappedComponent {...this.props} ctx={this.context.ctx} />; 
    } 
}; 

export default WithForm; 

는 지금은,이 순수 기능 싶습니다.

그래서, Official guide보고, 내가 한 다음

const WithForm = WrappedComponent => (props, context) => { 
    console.log('props', props, 'context', context); 
    return <WrappedComponent {...props} ctx={context.ctx} />; 
}; 

WithForm.contextTypes = { 
    ctx: PropTypes.object 
}; 

export default WithForm; 

그러나 상황이오고 빈 : {} 내가 잘못 뭐하는 거지

?

Answer 1

이 시도 :

당신이 포장 기능에 대한 컨텍스트를 설정하려고 아닌 순수한 기능을하는 때문입니다

const withForm = WrappedComponent => { 
    let WithForm = (props, context) => { 
     console.log('props', props, 'context', context); 
     return <WrappedComponent {...props} ctx={context.ctx} />; 
    }; 

    WithForm.contextTypes = { 
     ctx: PropTypes.object 
    }; 
    return WithForm; 
} 

export default withForm; 

.

원래 class 코드 스 니펫에서는 내부 함수에 올바르게 설정합니다.