React-------useContext使用（跨多级组件传递数据）

1.创建context

import React, { createContext, useState,useContext } from 'react'

const countContext=createContext()

2.创建好的context中的Provider传递值（使用value）----------------‘爷’组件

<countContext.Provider value={{count,setcount}}>

</countContext.Provider>

3.接收传递过来的值--------------‘孙’组件

 {/* 接收方式1 */}

      <countContext.Consumer>

       {(data)=>data.count}

      </countContext.Consumer>

 {/* 接收方式2 */}

    const data1=useContext(countContext)

    <li>{data1.count}</li>

---

代码小案例

import React, { createContext, useState,useContext } from 'react'

// 创建context
const countContext=createContext()

// 孙子
function Son(){
    // 接收方式2
    const data1=useContext(countContext)
    return(
        <div>
            son
            <ul>
            <li>
                {/* 接收方式1 */}
                <countContext.Consumer>
                    {(data)=>data.count}
                </countContext.Consumer>
            </li>
            <li>{data1.count}</li>
            <li>
                <button onClick={()=>data1.setcount(data1.count+1)}>
                   修改父count
                </button>
            </li>
            </ul>
        </div>
       
    )
}

// 儿子
function Child (){
    return(
        <div>
            子
            <hr/>
            <Son/>
        </div>
        
    )
}

export default function useContext1() {
  const [count,setcount]=useState(0)
  const add=()=>{
    setcount(count+1)
  }
//   需求：将count和方法传给孙子组件
  return (
    <countContext.Provider value={{count,setcount}}>
       <div>
        <h2>父</h2>
        <ul>
            <li>{count}</li>
            <li><button onClick={add}>add</button></li>
        </ul>
        <hr/>
        <Child/>
    </div>
    </countContext.Provider>
   
  )
}

  传递多个值的时候，使用的是对象{}