React Context传参方法基础使用

1. 创建Context容器：

   import {createContext} from 'react';
   
   export const MyContext=createContext(/*任意初始值(对象，数组等类型)*/)

   容器.js

2. 从创建的Context容器中取值：

   import { useContext } from 'react';
   import { MyContext } from '容器.js';
   
   export const son=()=>{
   
       const val=useContext(MyContext);//从容器中取值
   
       console.log(val)                //将输出容器内的值
   
       return(
           <div>{/*此处可显示取出的值*/}</div>
       )
   }
   

   子组件.js

3. 使用携带值的容器组件包裹需要该值的子组件：

   import { useContext } from 'react';
   import { MyContext } from '容器.js';
   
   export const GrandFather=()=>{
   
       const val=useContext(MyContext);
   
       return(
           <MyContext.Provider value={ val }> /*value可为任意数据或从容器中取值*/
               <Father>
                   <son/>
               </Father>
           </MyContext.Provider>
       )
   
   }

   父父组件.js

子组件通过useContext()取值将穿过父组件直接从最近一层的容器标签取出值，若从内到外一直找不到对应的容器标签提供值，则取初始值。