React全局变量

简介: React全局变量

React全局变量容器

// Provider
import { createContext } from 'react'
export const TestContext = createContext<any>(null)
export const ContainerContext = createContext<any>(null)
// 设置全局包裹
import { TestContext } from './Provider'
const confDrawer: any = usekef(null)
...
return (
<TestContext.Provider
  value={{ confDrawerShow: confDrawer.current?.show, }}
  <ConfEditDrawer ref={confDrawer} />
</TestContext.Provider>
// 使用
import { TestContext } from '../../Provider';
const { confDrawerShow }= useContext<any>(TestContext)
const onFn = () => {
  confDrawerShow('edit',{ data: xxxx })
}
目录
相关文章
|
4月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
33 0
|
5月前
|
前端开发 JavaScript
react 生命周期函数
react 生命周期函数
|
7月前
|
前端开发
react hooks 使用小技巧—useState传值函数
当使用useState时,传入一个函数作为初始状态值的参数和传入一个值的参数的效果是一样的,都会在组件渲染时被调用,但它们的使用场景略有不同。
273 1
|
1月前
|
前端开发 JavaScript
使用React Hooks实现简单的计数器应用
使用React Hooks实现简单的计数器应用
|
1月前
|
前端开发 JavaScript
react生命周期函数
react生命周期函数
|
5月前
|
前端开发 JavaScript
react JSX是什么,作用是什么
react JSX是什么,作用是什么
43 0
|
9月前
|
前端开发 JavaScript API
react 如何创建全局变量
在 React 应用中创建全局变量一般有两种方式: 常规 JavaScript 方式
929 0
|
9月前
|
前端开发
react项目调用函数
React项目中调用函数有多种方式,以下是其中的几种: 直接在组件中调用
73 0
|
10月前
|
前端开发 API
React 函数组件详解
React 函数组件详解
69 0
|
11月前
|
存储 JavaScript 前端开发
react 中useRef的用法
在React中,使用useRef可以创建一个可变的ref引用,允许你访问DOM节点或者在组件之间存储任意的可变值。 useRef本质上是提供一个容器,容器中存放的内容可以在组件的多次渲染之间进行保留,以及实现对DOM节点的操作。
460 0