HOCからラップされたコンポーネントの状態にアクセスする方法

Question

私はこのHOC Modalを構築しています。

私はボタン "Aplicar"（TouchableItem：たonPress）を押すと、それはモーダルであり、私はWrappedComponent状態にアクセスする必要があります。

これを行う方法はありますか？

import React, { Component, PropTypes } from 'react'; 
import { View, Text } from 'react-native'; 
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 

import TouchableItem from '../TouchableItem'; 
import ModalHOC from '../Modal'; 
import styles from './styles'; 

const ModalFiltroHOC =() => (WrappedComponent) => { 
    @ModalHOC() 
    class ModalFiltro extends Component { 
    static propTypes = { 
     onClose: PropTypes.func.isRequired, 
     onSuccess: PropTypes.func.isRequired, 
     successText: PropTypes.string.isRequired, 
     title: PropTypes.string.isRequired, 
    } 

    render() { 
     return (
     <View style={{ flex: 1, backgroundColor: 'white' }}> 
      <View style={styles.modalFiltroHeader}> 
      <View style={{ flex: 0.15 }}></View> 
      <View style={styles.modalFiltroHeaderTitle}> 
       <Text style={styles.modalFiltroHeaderTitleText}> 
       {this.props.title} 
       </Text> 
      </View> 
      <View style={styles.modalFiltroHeaderIconContainer}> 
       <TouchableItem 
       style={{ marginRight: 10 }} 
       onPress={this.props.onClose} 
       pressColor={'white'} 
       delayPressIn={0} 
       borderless 
       > 
       <MaterialIcons 
        color={'white'} 
        name="close" 
        size={22} 
       /> 
       </TouchableItem> 
      </View> 
      </View> 
      <View style={styles.modalFiltroContent}> 
      <WrappedComponent {...this.props} /> 
      </View> 
      <TouchableItem 
      onPress={this.props.onSuccess} {/* <-- HERE */} 
      pressColor={'white'} 
      style={styles.modalFiltroSuccessContainer} 
      > 
      <View pointerEvents="box-only" style={styles.modalFiltroSucccess}> 
       <MaterialIcons 
       color={'white'} 
       name="check" 
       size={22} 
       /> 
       <Text style={styles.modalFiltroSucccessText}> 
       {this.props.successText} 
       </Text> 
      </View> 
      </TouchableItem> 
     </View> 
    ); 
    } 
    } 

    return ModalFiltro; 
}; 

export default ModalFiltroHOC; 

注：

ModalHOCはシンプルリアクトネイティブモーダルです。

ありがとうございます！

Answer 1

私はあなたのコードは次のようになります。このpost

でそれについての詳細を読むことができ、この使用継承反転 を解く：

import React, { Component, PropTypes } from 'react'; 
import { View, Text } from 'react-native'; 
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 

import TouchableItem from '../TouchableItem'; 
import ModalHOC from '../Modal'; 
import styles from './styles'; 

const ModalFiltroHOC =() => (WrappedComponent) => { 
    @ModalHOC() 
    class ModalFiltro extends WrappedComponent { {/* <--- */} 
    handleSuccess =() => { 
     console.log(this.state); 
    } 

    render() { 
     return (
     <View style={{ flex: 1, backgroundColor: 'white' }}> 
      <View style={styles.modalFiltroHeader}> 
      <View style={{ flex: 0.15 }}></View> 
      <View style={styles.modalFiltroHeaderTitle}> 
       <Text style={styles.modalFiltroHeaderTitleText}> 
       {this.props.title} 
       </Text> 
      </View> 
      <View style={styles.modalFiltroHeaderIconContainer}> 
       <TouchableItem 
       style={{ marginRight: 10 }} 
       onPress={this.props.onClose} 
       pressColor={'white'} 
       delayPressIn={0} 
       borderless 
       > 
       <MaterialIcons 
        color={'white'} 
        name="close" 
        size={22} 
       /> 
       </TouchableItem> 
      </View> 
      </View> 
      <View style={styles.modalFiltroContent}> 
      {super.render()} {/* <--- */} 
      </View> 
      <TouchableItem 
      onPress={this.handleSuccess} 
      pressColor={'white'} 
      style={styles.modalFiltroSuccessContainer} 
      > 
      <View pointerEvents="box-only" style={styles.modalFiltroSucccess}> 
       <MaterialIcons 
       color={'white'} 
       name="check" 
       size={22} 
       /> 
       <Text style={styles.modalFiltroSucccessText}> 
       {this.props.successText} 
       </Text> 
      </View> 
      </TouchableItem> 
     </View> 
    ); 
    } 
    } 

    return ModalFiltro; 
}; 

export default ModalFiltroHOC;