如何從HOC訪問包裹組件狀態

Question

我正在構建這個HOC模態。

當我按下按鈕 「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;