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

提前致谢!

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;