Hooks笔记 - useContext
useContext解决原先父子之间传值的问题
基础使用
import React, { useState, createContext, useContext} from 'react'
const CountContext = createContext(); // 创建一个共享的组件,可以在jsx中使用
const Counter = () => {
let count = useContext(CountContext);
return (
<h2>{ count }</h2>
)
}
const Test = () => {
const [count, setCount] = useState(0)
return (
<div>
<p>clicked:{ count }</p>
<button onClick={() => {setCount(count + 1)}}>click</button>
<CountContext.Provider value={count}>
<Counter />
</CountContext.Provider>
</div>
)
}
export default Test
1、需要先使用const CountContext = createContext()
来创建一个用来存储的玩意(不知道应该怎么称呼)。
2、在父级当中使用<CountContext.Provider>
固定成对标签,value
为需要传递的值传什么些什么,标签中为需要接受值的子组件
3、在子组件中使用useContext(上面定义的标签:CountContext)
来获取传递的值;
4、如果父子组件分别为不同的文件、那么可以单独将如下代码单独建立文件抛出后使用import CountContext from './文件名'
调用
import { createContext} from 'react'
const CountContext = createContext(); // 创建一个共享的组件,可以在jsx中使用
export default CountContext
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭