【react】react 中使用context 的方法------跨组件传值

 

context的基本使用，以及什么时候会用到context?

        1、通过React.createContext创建生产者和消费者组件

        2、通过生产者组件(GlobalContext.Provider)来生产所有组件所需要的数据，注意当前生产者组件中有
        一个属性value,value的值就是生产的数据
        
        3、如果某些组件需要使用生产者生产的数据时候，需要用消费者组件(GlobalContext.Consumer)进行包裹

        注意的地方是消费者组件内部必须是一个函数，函数必须返回一个jsx语法，另外这个函数的形参就是生产者
        的数据


        当你需要跨组件传值的时候就需要用到context

 

 

context 的使用（传递数据）

 

 

 通过createContext  创建一个生产者，共下面的消费来使用。

 

 

 

 

 

 context使用的基本使用

1、创建文件（引入及导出）------------1、通过React.createContext创建生产者和消费者组件

 

 

 

  2、在main.js 文件中引入，通过 <GlobalContext.Provider> 标签中的value来生产数据-----

2、通过生产者组件(GlobalContext.Provider)来生产所有组件所需要的数据，注意当前生产者组件中有
        一个属性value,value的值就是生产的数据

 

 

 

 

 3、使用数据（引入，标签包裹，函数）-----------------

3、如果某些组件需要使用生产者生产的数据时候，需要用消费者组件(GlobalContext.Consumer)进行包裹

        注意的地方是消费者组件内部必须是一个函数，函数必须返回一个jsx语法，另外这个函数的形参就是生产者

        的数据

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

扩展内容