如何从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;