我是关于Facebook ReactJS和React-native的初学者,因此我在一个教程的帮助下开始编码,该教程展示了 如何在Android和iOS之间共享代码。
在本教程的稍后部分,将实现一个按钮,该按钮可切换状态。不幸的是,这是用mixin制作的。我想用HOC组件来做。
原始混入
export default {
getInitialState() {
return {
pressed: false
}
},
handlePress() {
this.setState({pressed: !this.state.pressed});
}
}
Run Code Online (Sandbox Code Playgroud)
上述mixin的原始呼叫
{ ...
render() {
const buttonStyle = [styles.button];
if (this.state.pressed) buttonStyle.push(styles.buttonPress);
return (
<TouchableOpacity onPress={this.handlePress.bind(this)} style={buttonStyle}>
<Text style={styles.text}>{this.props.text}</Text>
</TouchableOpacity>
)
}
}
reactMixin.onClass(Button, ButtonCommon);
export default Button;
Run Code Online (Sandbox Code Playgroud)
我的HOC
export var ButtonComp = (ComposedComponent) => class extends Component {
constructor(props) {
super(props);
this.state = {pressed: false};
}
handlePress() {
this.setState({pressed: !this.state.pressed});
}
render() {
return <ComposedComponent {...this.props} …Run Code Online (Sandbox Code Playgroud)