时间戳

首页 > 解决方案 > 在反应中从子组件调用动作

reactjs - 在反应中从子组件调用动作

问题描述

我有一个上下文提供者操作

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(){

};

如何从 child2 调用 onPageChanged 操作？

标签： reactjsreact-context

解决方案

只需将参考传递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()

推荐阅读