关于#react.js#的问题：React使用Context，子孙组件(类组件)如何在自己的函数里面调用父组件传过来的value父组件：

React使用Context，子孙组件(类组件)如何在自己的函数里面调用父组件传过来的value
父组件：

import React from 'react';
import { cartContext} from '../cartContext'

class App extends React.PureComponent {
state = {
    mealsData: [
          ],
    cartData:
        {data: [],
        totalAmount: 0,
        totalCost: 0
        }
}
addCartData = （） => { 
}
lessCartData = （） => {
   
}
render(){
    return [
      <cartContext.Provider value={{cartData:this.state.cartData,addCartData:this.addCartData, lessCartData:this.lessCartData}}>
       
        <Meals data={ this.state.mealsData }>
        </Meals>
      </cartContext.Provider>
    ]
  }
}

子孙组件：


import React from 'react';
import { cartContext} from '../cartContext'

class Counter extends React.PureComponent {
    countAdd = () => {
//在此调用父组件中的addCartData函数
        console.log(this.context);
    }
    render(){
        return [
        <cartContext.Consumer>
 {
            data => {
                // console.log(data);
             return   [ <div className={classes.counter}>
{  this.props.amount && this.props.amount !== 0 ? 
<>
<button  className={classes.minus}><FontAwesomeIcon icon={faMinus}/></button> 
<span className={classes.count}>{this.props.amount}</span>   
</>
: null }
<button className={classes.add} onClick={this.countAdd}>
   <FontAwesomeIcon icon={faPlus}/>
    </button>
          </div>]
            }
            
        }

            </cartContext.Consumer>
            ]
    }
}class Counter extends React.PureComponent {
    countAdd = () => {
        console.log(this.context);
    }
    render(){
        return [
        <cartContext.Consumer>
 {
            data => {
                console.log(data);           
            }          
        }
            </cartContext.Consumer>
            ]
    }
}

cartContext.js：


import React from 'react';
export let cartContext = React.createContext()

不知道你这个问题是否已经解决, 如果还没有解决的话:

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/963550
你也可以参考下这篇文章：react context解决多层组件传参
除此之外, 这篇博客: react中使用context跨组件传递数据中的 使用范围 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
context的使用范围是用于定义一些在整体组件树中，都可以被视为全局的变量，例如，全局的主题色调，用户的登录信息等等。
而一般的跨组件信息传递，不建议使用context。
使用context意味着创造了一些自该组件起，影响范围为该组件全部后代组件的全局变量，而如果我们在其后代组件的内又一次地使用了context，组件之间将变得非常混乱，我们将无法得知数据到底来自哪个context，并且依赖关系也将变得非常复杂。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

我先放上解决问题后的代码（父组件部分没有做出修改，只是改变了子孙组件的代码，所以只放上子孙组件的代码）：
修改后的代码：

 
import React from 'react';
import { cartContext} from '../cartContext'
 
class Counter extends React.PureComponent {
    render(){
        return [
        <cartContext.Consumer>
 {
            data => {
                // console.log(data);
             return   [ <div className={classes.counter}>
{  this.props.amount && this.props.amount !== 0 ? 
<>
<button  className={classes.minus} onClick={() => data.lessCartData(this.props.meal)}><FontAwesomeIcon icon={faMinus}/></button> 
<span className={classes.count}>{this.props.amount}</span>   
</>
: null }
<button className={classes.add} onClick={() => data.addCartData(this.props.meal)}>
   <FontAwesomeIcon icon={faPlus}/>
    </button>
          </div>]
            }
            
        }
 
            </cartContext.Consumer>
            ]
    }
}class Counter extends React.PureComponent {
    countAdd = () => {
        console.log(this.context);
    }
    render(){
        return [
        <cartContext.Consumer>
 {
            data => {
                console.log(data);           
            }          
        }
            </cartContext.Consumer>
            ]
    }
}

原代码：

 
import React from 'react';
import { cartContext} from '../cartContext'
 
class Counter extends React.PureComponent {
    countAdd = () => {
//在此调用父组件中的addCartData函数
        console.log(this.context);
    }
    render(){
        return [
        <cartContext.Consumer>
 {
            data => {
                // console.log(data);
             return   [ <div className={classes.counter}>
{  this.props.amount && this.props.amount !== 0 ? 
<>
<button  className={classes.minus}><FontAwesomeIcon icon={faMinus}/></button> 
<span className={classes.count}>{this.props.amount}</span>   
</>
: null }
<button className={classes.add} onClick={this.countAdd}>
   <FontAwesomeIcon icon={faPlus}/>
    </button>
          </div>]
            }
            
        }
 
            </cartContext.Consumer>
            ]
    }
}class Counter extends React.PureComponent {
    countAdd = () => {
        console.log(this.context);
    }
    render(){
        return [
        <cartContext.Consumer>
 {
            data => {
                console.log(data);           
            }          
        }
            </cartContext.Consumer>
            ]
    }
}

方案就是我对button的onClick事件添加了一个匿名函数,在这个匿名函数里调用了父组件的addCartData函数