コンテキストでHOCを変換して純粋な関数に変換する

Question

私はHOCを作成しようとしていますが、その機能は本当に簡単です。ラップされたコンポーネントにコンテキストから小道具を追加します。

私はこの方法でそれを行うことができた：私はちょうどrender（）メソッドを持っているので

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コードスニペットでは、内部関数に正しく設定されています。