HOCからコンポーネントへの機能を渡す（React、React native）

Question

私はFacebookのReactJSとReact-nativeに関する初心者ですから、 how to share code between Android and iOSというチュートリアルの助けを借りてコーディングを始めました。

このチュートリアルの後半では、状態を切り替えるボタンが実装されています。 残念ながら、これはmixinで作られています。私はHOCコンポーネントでそれをやりたい。上記のミックスインの

オリジナルミックスイン

export default { 
    getInitialState() { 
    return { 
     pressed: false 
    } 
    }, 

    handlePress() { 
    this.setState({pressed: !this.state.pressed}); 
    } 
} 

オリジナルコール

{ ... 
    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; 

マイ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} data={this.state.pressed} />; 
    } 
}; 

マイHOCの使用

import { ButtonComp } from './button.common'; 

class Button extends Component { 
    render() { 
    const buttonStyle = [styles.button]; 
    if (this.props.data) buttonStyle.push(styles.buttonPress); 

    return (
     <TouchableOpacity onPress={this.handlePress.bind(this)} style={buttonStyle}> 
     <Text style={styles.text}>{this.props.text}</Text> 
     </TouchableOpacity> 
    ) 
    } 
} 

export default ButtonComp(Button); // Enhanced component 

Iはコード上に実行すると、私は次のエラーを取得する（this.handleの呼び出しが発生したとき、TouchableOpacityタグ中のSO）：

未定義はオブジェクトではありません（ 'this.handlePress.bind'を評価する）

どうしたのですか？ HOCは関数ではなくデータを渡すだけですか？ 助けてくれてありがとう！

Answer 1

HOCはそれを行うことができません。しかし、あなたがthisを通じてそこに呼ばれる包まれたコンポーネントで利用可能なHOCから関数をしたい場合には、あなたはpropsを通してそれを渡す必要があります。

export var ButtonComp = (ComposedComponent) => class extends Component { 
     constructor(props) { 
      super(props); 
      this.state = {pressed: false}; 
      this.handlePress = this.handlePress.bind(this); 
     } 

     handlePress() { 
      this.setState({pressed: !this.state.pressed}); 
     } 

     render() { 
      return <ComposedComponent {...this.props} handlePress={this.handlePress} data={this.state.pressed} />; 
     } 
    }; 

    class Button extends Component { 
     render() { 
      const buttonStyle = [styles.button]; 
      if (this.pressed) buttonStyle.push(styles.buttonPress); 

      return (
       <TouchableOpacity onPress={this.props.handlePress} style={buttonStyle}> 
        <Text style={styles.text}>{this.props.text}</Text> 
       </TouchableOpacity> 
      ) 
     } 
    }