React_Hooks useContext
useContext传值,可跨组件传值 夫->孙
1.创建两个组件ReactHooksUseContextF(父组件),ReactHooksUseContextC(子组件)
2.ReactHooksUseContextF(父组件)父组件使用createContext创建context
import React,{
useState,createContext} from 'react'
import ReactHooksUseContextC from './ReactHooksUseContextC'
export const CountContext = createContext()
const ReactHooksUseContextF = () => {
const [count,setCount]=useState(0)
return (
<div>
<button onClick={
()=>setCount(count+1)}>Click Me</button>
<p>You Clicked {
count} Times</p>
<CountContext.Provider value={
count}>
{
}
<ReactHooksUseContextC/>
</CountContext.Provider>
</div>
)
}
export default ReactHooksUseContextF
3.ReactHooksUseContextC(子组件)子组件使用useContext获取context
import React,{
useContext} from 'react'
import {
CountContext} from './ReactHooksUseContextF'
const ReactHooksUseContextC = () => {
const context = useContext(CountContext)
return (
<div>
<h3>{
context}</h3>
</div>
)
}
export default ReactHooksUseContextC