React——Hooks之useContext

import React from 'react'
const myContext = React.createContext() // 创建一个上下文容器
// useCotext是父组件给子组件传值的时候用的，原本react父子组件间传值使用props一级一级的传递，而context可以生成一个数据，把它提供给这个组件所包含的所有的子组件
const Com1 = () =>{
	const [count, setCount] = React.useContext(myContext) // count 与setCount是从父组件拿到的功能，能正常使用
	return (
		<>
			Count:{ count }
			<Button onClick = ()=>{ setCount(count + 1) } > count+1 </Button>
		</>
	)
}

const App = ()=>{
	const [count, setCount] = useState(0)
	return (
		<myContext.Provider value={{count, setCount}}> //value中是要共享的值
			<div>
				<Com1 /> // 这个子组件内部就可以useContext拿到所共享的值
			</div>
		</myContext.Provider>
	)
}

标签：count,const,Hooks,setCount,React,useContext,组件
来源： https://blog.csdn.net/xiaoguoyangguang/article/details/116805320