小编byt*_*ool的帖子

将功能从HOC传递到组件(React,React本机)

我是关于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)

javascript android ios reactjs react-native

5
推荐指数
1
解决办法
2356
查看次数

标签 统计

android ×1

ios ×1

javascript ×1

react-native ×1

reactjs ×1