请考虑 React Native 代码:
MyForm.js
Class MyForm extends Component{
render(){
//Code Left out for simplicity
}
}
function mapStateToProps(){//code left out for simplicity}
MyForm.propTypes = {//code left out for simplicity};
export default(connect(mapStateToProps, Actions)(withHocComponent(MyForm)));
HoComponent.js
export default withHocComponent = WrappedComponent => class HoComponent extends Component {
class HocComponent extends Component{
render(){
<View>
<WrappedComponent/>
</View>
}
}
}
function mapStateToProps(state) {
return {
prop1: state.myReducer.someProp,
};
}
export default connect(mapStateToProps)(withHocComponent);
但是,我收到以下错误:
Cannot call class as a function.
堆栈指的是这一行:export default(connect(mapStateToProps, Actions)(withHocComponent(MyForm)));
除了 redux connect
函数之外,我正在尝试实现一个额外的高阶组件。
最佳答案
好的,我希望这就是您要找的。如果你有任何问题随时问。
高级组织
function withHocComponent(WrappedComponent) {
class Wrapper extends Component {
render() {
// here you could pass props to your wrappedComponent
return <WrappedComponent />;
}
const mapStateToProps = (state) => {
//code left out for simplicity
}
//connect your HOC to the store inside the Wrapper
return connect(mapStateToProps, {})(Wrapper);
}
}
export default withHocComponent;
我的表格
Class MyForm extends Component{
render(){
//Code Left out for simplicity
}
}
function mapStateToProps(){//code left out for simplicity}
MyForm.propTypes = {//code left out for simplicity};
// Here is the part where the magic happens.
// Pass your HOC your connected component
export default withHocComponent(connect(mapStateToProps, {})(MyForm));
关于javascript - 构建高阶组件并将其应用于 redux connect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49515660/