如何从HOC访问包装的组件状态 [英] How to access a Wrapped Component state from HOC

问题描述

我正在构建此HOC模式.

I'm building this HOC Modal.

当我按下Modal上的"Aplicar"按钮(TouchableItem:onPress)时，我需要访问WrappedComponent状态.

When I press the Button "Aplicar" (TouchableItem:onPress), that is on the Modal, I need to access the WrappedComponent state.

有什么办法吗?

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是一个简单的React Native Modal.

ModalHOC is a simple React Native Modal.

提前谢谢！

推荐答案

我使用继承反转解决了此问题您可以在此帖子中了解更多信息.

I solved this using Inheritance Inversion You can read more about it in this post

代码现在看起来像这样:

The code now looks like this:

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;

这篇关于如何从HOC访问包装的组件状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！