Привязать событие к компоненту - React, Redux - PullRequest
Новая
       6

Привязать событие к компоненту - React, Redux

0 голосов
/ 13 января 2019

У меня есть такой компонент: 

class GlobalComponent extends React.Component{
    select= (e) => {
        this.props.select(); // must be implemented in another component and not parent
    };
    render(){
        return(
            <div>
                {this.state.data}
                    <Button onClick={this.select}>Select</Button>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return  state.data
}

const mapDispatchToProps = (dispatch, props) => ({
    select: () => dispatch(select()),
});
export default connect(mapStateToProps, mapDispatchToProps)(GlobalComponent );

Я импортирую этот компонент в корень моего приложения - app.js вот так: 

<GlobalComponent />

Проблема в этом действии select. Я знаю, что могу передать его из глобального состояния или родительского компонента с помощью реквизита (для примера): 

<GlobalComponent select={this.select} />

или с mapDispatchToProps

, но проблема в том, что компонент определен только в одном месте, в противном случае мне нужно импортировать GlobalComponent почти во все компоненты. Я хочу импортировать компонент один раз (где-то в корне), а затем каким-то образом в компоненте, который использует GlobalComponent, определить функцию, которая НЕ будет выполнять select, но реализует select, и это только для события click в ГлобальныйКомпонент: 

export default class ComponentThatUsesGlobal extends React.Component {

    executeWhenGlobalComponentBtnIsClicked = () => {

    }
}

Возможно ли это, и это хороший подход или лучше просто импортировать компонент везде?

Я использую и Redux.

...