Вызвать действие от дочернего компонента в реагировать

Question

У меня есть действие провайдера контекста

import React, {Component} from 'react';
import MemberSelectionContext from './MemberSelectionContext';

class MemberSelectionProvider extends Component {
    state = {
        selectedMembers: []
    };

    get actions() {
        return {
            onPageChanged: this.onPageChanged
        };
    }

    onPageChanged = data => {

    };

    render() {
        const {children} = this.props;

        return (
            <MemberSelectionContext.Provider value={{
                store: this.state,
                actions: this.actions
            }}>
                {children}
            </MemberSelectionContext.Provider>
        );
    }
}

export default MemberSelectionProvider;

onPageChanged `` `вызов действия из child1`` следующим образом

<button className="btn btn-outline-secondary" onClick={this.props.actions.onPageChanged}>
                            <i className="fa fa-backward" aria-hidden="true"></i>&nbsp;
                            <span className="sr-only-xs">Previous</span>
                        </button>

Я хочу вызвать это onPageChanged событие от другого дочернего компонента, который является child2

this.props.actions.onPageChanged = function(){

};

Как я могу вызвать действие onPageChanged от child2?

Answer 1

Просто передайте ссылку getActions ребенку как prop

class MemberSelectionProvider extends Component {
   get actions() {
        return {
            onPageChanged: this.onPageChanged
        };
   }
   onPageChanged = data => {

   };

   render(){
       return <Child getActions={this.getActions}/>
   }

И внутри Child

 const Child = ({ getActions }) =>{
     const actions = getActions()
     acions.onPageChanged()
 }

Это также работает для Providers, но вместо props сохраните ссылку getActions внутри value и используйте ее следующим образом

const context = useContext(MemberSelectionContext)

const actions = context.getActions()
actions.onPageChange()