React hoc并失去了对此的参考

Question

我正在尝试理解和使用React和Redux的HOC。我有以下设置。我将使用HOC有多个按钮并通过他们自己的单击。并且想知道：

a。这是事件模式的很好用法吗？

b。在FooterButton的渲染函数内部的设置中，this参考指定Workerglobalscope和Iconheigh，IconWidth和IconColor在Homebutton内部成为未定义的值或意外值。

任何建议都将不胜感激。

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功能而不是组件。

compose和connect都可以包装您的组件。因此，您的事件可能是：

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);  
}