reactjs - 如何从 HOC 访问 Wrapped Component 状态

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

提前致谢！

Answer 1

我使用继承反转解决了这个问题 你可以在这篇文章中阅读更多关于它的信息

代码现在如下所示：

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;