import { createContext } from 'react'let defaultValue = {}const context = createContext(defaultValue) export default context;
创建一个 Context
对象,当 React
渲染一个订阅了这个 Context
对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider
中读取到当前的 context
值。
只有当组件所处的树中没有匹配到 Provider
时,其 defaultValue
才会生效
import { useContext } from 'react'
impor context from '@/xxx/xxx.ts' // 引入上面创建的 Context 对象const contextParams = useContext(context)
useContext
接收一个 Context
对象(即 React.createContext
的返回值),并返回该 context 的当前值。
可以分为以下三步
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 (这里放需要传递的数据}> // 比如 value={{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 (<>>)
}
下一篇:【MySQL】初始MySQL