useContext可以用于父子组件传递数据,也可以跨组件传递数据,大多数的使用情况是跨组件传递通信。
使用useContextAPI的步骤如下:
1.创建一个context对象,并且导出这个context对象
import React form 'react';
export const Context = React.CreateContext('');
2.使用Context的Provider提供需要传递的数据
<div className="App">
<MyContext.Provider value={'data'}>
<UseContextPage/>
</MyContext.Provider>
</div>
3.使用useContext获取context.provider提供的value
import MyContext from './MyContext' //引入你创建的MyContext
function UseContextPage() {
const value = useContext(MyContext);
console.log(value);
return (
<div>UseContextPage</div>
)
}