react context用法
时间: 2023-11-28 16:06:37 浏览: 27
React Context 是 React 中一个非常有用的特性,它可以让你在应用中共享数据,而不需要一层层地将 props 传递下去。使用 React Context,你可以在 React 组件树中的任何地方访问共享的数据。
使用 React Context,需要创建一个 Context 对象,然后通过 Provider 组件将数据传递给子组件,子组件可以通过 Consumer 组件来获取数据。
下面是 React Context 的基本用法:
1. 创建一个 Context 对象
```js
const MyContext = React.createContext(defaultValue);
```
其中 defaultValue 是可选的,表示当没有 Provider 组件包裹时,使用的默认值。
2. 在父组件中使用 Provider 组件,传递数据给子组件
```js
<MyContext.Provider value={data}>
<ChildComponent />
</MyContext.Provider>
```
其中 data 是要传递给子组件的数据,ChildComponent 是子组件。
3. 在子组件中使用 Consumer 组件,获取数据
```js
<MyContext.Consumer>
{data => (
<div>{data}</div>
)}
</MyContext.Consumer>
```
其中 data 就是从父组件中传递下来的数据。
除了使用 Consumer 组件外,还可以使用 useContext Hook 来获取数据。
```js
const data = useContext(MyContext);
```
这样就可以在函数组件中直接获取 Context 中的数据了。
总的来说,React Context 是一个非常方便的工具,可以让我们在应用中共享数据,避免了 props 层层传递的繁琐。