反应HOC并失去对此的参考

Question

我正在尝试理解和使用HOC with react和redux。我有以下设置。我将有多个按钮使用the hoc并传入他们自己的onClick。并想知道：

一个。这是HOC模式的一个很好的用法吗？

湾在FooterButton的render函数中使用此设置，this引用DesignatedWorkerGlobalScope，HomeButton中的iconHeigh，iconWidth和iconColor变为未定义或意外值。

任何意见，将不胜感激。

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

import { connect } from 'react-redux';
import { compose } from 'redux';

import { getColors, getStylesheet} from "../../styles/StyleManager";

const FooterButtonWrapper = (FooterButtonWrapped, onClick) => { 
    return class FooterButton extends React.Component {

        constructor(props) {
            super(props);

            this.state = {
                Theme: getStylesheet(),
                colors: getColors()
            }            
        }

        _onClick = () => {
            onClick(this.props.dispatch);
        }

        render() {            
            const { Theme, colors } = this.state;

            return(                
                <TouchableOpacity onPress={this._onClick}>
                    <FooterButtonWrapped iconWidth={15} iconHeight={15}  iconColor={"white"}/>            
                </TouchableOpacity>
            )
        }

    }
}

const mapStateToProps = (state, ownProps) => ({});


const composeFooterButton = compose(
    connect(mapStateToProps),
    FooterButtonWrapper 
);

export default composeFooterButton;

然后是一个使用它的按钮：

import React from 'react';
import { View, Text } from 'react-native';

import { push as gotoRoute } from 'react-router-redux';

import { FooterButtonWrapper } from './';
import { Home } from '../../assets';


const HomeButton = ({iconHeight, iconWidth, iconColor}) => (

    <View>
        <Home width={ iconWidth } height={ iconHeight } color={ iconColor }/>   
        <View><Text>Home</Text></View>
    </View>
);

const _onClick = dispatch => {
    dispatch( gotoRoute( '/' ));
}

export default FooterButtonWrapper(HomeButton, _onClick);

Answer 1

它就像你使用的那样发生

const composeFooterButton = compose(
    connect(mapStateToProps),
    FooterButtonWrapper 
);

export default composeFooterButton;

用于HOC功能而不是Component。

compose和connect都可以包裹你的组件。所以你的HOC可能是：

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

import { connect } from 'react-redux';
import { compose } from 'redux';

import { getColors, getStylesheet } from '../../styles/StyleManager';

export default function FooterButtonWrapper(FooterButtonWrapped, onClick) {
  class FooterButton extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        Theme: getStylesheet(),
        colors: getColors(),
      };
    }

    _onClick = () => {
      onClick(this.props.dispatch);
    };

    render() {
      const { Theme, colors } = this.state;

      return (
        <TouchableOpacity onPress={this._onClick}>
          <FooterButtonWrapped
            iconWidth={15}
            iconHeight={15}
            iconColor={'white'}
          />
        </TouchableOpacity>
      );
    }
  }
  const mapStateToProps = (state, ownProps) => ({});


  return connect(mapStateToProps)(FooterButton);  
}