React中 类组件 和函数组件 如何去使用Context

每日一学,继续加油。

React中类组件中 如何去使用孙子组件如何去使用爷爷组件的数据和方法,

如果不用Context对象去实现的花那么首先需要用this.props.属性名去实现

这里我先创建A组件 然后再次创建B组件 和C组件 ,然后C组件去使用 A组件的方法和数据

下面为B组件       

B组件接收到A组件传递过来的数据,然后B组件也是通天this.props去传递给C

接下来为C组件 接收B组件再次传递过来的参数

这种原生的通过this.props去逐级传递的方法很不好,

那我们来用Context()方法来跨级传递数据和方法

我们也是先来创建一个A组件  

在A组件外围 创建一个Context对象,通过value传值以后 B组件的子组件也能被调用到啦

 

然后B组件里面的所有子组件,要用的时候就收一下就行啦

static contextType = MyContext    创建的Context的对象名

虽然React.createContext方法好用,但是只限于多级嵌套,

单级嵌套的组件的话还是用this.props方法更加的快捷,方便

这个是类(Class)组件 去使用Context方法 下面来说一下函数组件如何去使用Context

使用函数组件的话,A组件里面的 *** 作步骤还是不变的,

多用多看,多练习,才能更好更快的掌握