useContext 让父子组件传值更简单
createContext 函数创建 context
- 创建
context
const CountContext = createContext()
- 实现父子传值,相当于把
count
变量实现跨层级传递和使用了,当父组件的count
变量发生变化时,子组件也会发生变化<CountContext.Provider value={count}> </CountContext.Provider>
- 完整代码
import React, { useState , createContext } from 'react'; //===关键代码 const CountContext = createContext() function Example4(){ const [ count , setCount ] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={()=>{setCount(count+1)}}>click me</button> {/*======关键代码 */} <CountContext.Provider value={count}> </CountContext.Provider> </div> ) } export default Example4;
useContext 接收上下文变量
- 引入
import React, { useState , createContext , useContext } from 'react';
- 在
<CountContext.Provider>
中写入子组件<CountContext.Provider value={count}> <Counter /> </CountContext.Provider>
- 子组件中使用
useContext()
接收父组件传来的值function Counter(){ const count = useContext(CountContext) //一句话就可以得到count return (<h2>{count}</h2>) }