useContext 详细解析及与 createContext 搭配使用解决祖孙多层组件之间传参问题

#useContext 详细解析及与 createContext 搭配使用解决祖孙多层组件之间传参问题| 来源: 网络整理| 查看: 265

1. createContext import { createContext } from 'react' let defaultValue = {} const context = createContext(defaultValue) export default context;

创建一个 Context 对象，当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 才会生效

2. useContext import { useContext } from 'react' impor context from '@/xxx/xxx.ts' // 引入上面创建的 Context 对象 const contextParams = useContext(context)

useContext 接收一个 Context 对象（即 React.createContext 的返回值），并返回该 context 的当前值。

useContext 可以帮助我们跨越组件层级直接传递变量，实现数据共享。Context 的作用是：对它所包含的组件树提供全局共享数据的一种技术。 3. 使用

可以分为以下三步

1. 在一个单独的 .ts文件中，引入 createContext 方法，并创建 Context 对象、导出

import { createContext } from 'react' let defaultValue = {} const context = createContext(defaultValue) export default context;

2. 在父/祖组件中使用 Provider 组件包裹需要接收数据的子组件，并通过 value 属性提供要共享的数据

父组件:

import { useContext } from 'react' impor context from '@/xxx/xxx.ts' // 引入上面创建的 Context 对象 return ( {isFullScreen: true, toDoFlag: '1'}} 需要接收数据的子/孙组件这里的子/孙组件中，如果在嵌套子组件，仍然可以获取共享数据 )

3. 在需要获取公共数据的子/孙组件中，使用 useContext方法、Context 对象，得到 value 的值

子/孙组件:

import React, { useContext } from 'react'; import context from '@/xxx/xxx' const index = () => { const contextParams = useContext(context) // 获取到value，可以在下面进行使用 return ( ) }

【本文地址】

公司简介

联系我们

useContext 详细解析 及与 createContext 搭配使用解决祖孙多层组件之间传参问题

useContext 详细解析及与 createContext 搭配使用解决祖孙多层组件之间传参问题