реагировать HOC и потерять ссылку на это - PullRequest
Новая
       9

реагировать HOC и потерять ссылку на это

0 голосов
/ 19 февраля 2019

Я пытаюсь понять и использовать HOC с реакцией и редукцией.У меня есть следующие настройки.У меня будет несколько кнопок, использующих hoc и передающих их по собственному клику.и хотел бы знать:

a.Это хорошее использование шаблона HOC?

b.с этой настройкой внутри функции рендеринга FooterButton this ссылается на DesignatedWorkerGlobalScope, а 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;

, а затем кнопка, которая его использует: 

</p>

<code>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);
</code>

1 Ответ

0 голосов
/ 19 февраля 2019

Это происходит так, как вы используете 

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

export default composeFooterButton;

для функции HOC вместо компонента.

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