React Hooks: use modal
useModal:
export const useModal = (initTitle: string, initContent: string | React.ReactElement) => {
const [visible, setVisible] = useState(false);
const [title, setTitle] = useState(initTitle);
const [content, setContent] = useState(initContent);
const CustomModal = () => {
return (
<Modal
visible={visible}
title={title}
closable={false}
footer={null}
>
{content}
</Modal>
);
}
const show = (content?: string | React.ReactElement) => {
content && setContent(content);
setVisible(true);
};
const hide = (delay?: number) => {
if (delay) {
setTimeout(() => setVisible(false), delay);
} else {
setVisible(false)
}
};
return {
show, hide, CustomModal, setTitle, setContent
}
}
use:
const {hide, show, CustomModal} = useModal('系统提示', '正在初始化...');
render() {
<div><CustomModal /></div>
}
React Hooks: use modal的更多相关文章
- React Hooks: useCallback理解
useCallback把匿名回调“存”起来 避免在component render时候声明匿名方法,因为这些匿名方法会被反复重新声明而无法被多次利用,然后容易造成component反复不必要的渲染. ...
- 理解 React Hooks 心智模型:必须按顺序、不能在条件语句中调用的规则
前言 自从 React 推出 hooks 的 API 后,相信大家对新 API 都很喜欢,但是它对你如何使用它会有一些奇怪的限制.比如,React 官网介绍了 Hooks 的这样一个限制: 不要在循环 ...
- React Hooks简单业务场景实战(非源码解读)
前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...
- 通过 React Hooks 声明式地使用 setInterval
本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...
- 初探React Hooks & SSR改造
Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...
- React hooks实践
前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...
- React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...
- 关于React Hooks,你不得不知的事
React Hooks是React 16.8发布以来最吸引人的特性之一.在开始介绍React Hooks之前,让咱们先来理解一下什么是hooks.wikipedia是这样给hook下定义的: In c ...
- react hooks 全面转换攻略(三) 全局存储解决方案
针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 redux-re ...
随机推荐
- 深度学习框架Keras与Pytorch对比
对于许多科学家.工程师和开发人员来说,TensorFlow是他们的第一个深度学习框架.TensorFlow 1.0于2017年2月发布,可以说,它对用户不太友好. 在过去的几年里,两个主要的深度学习库 ...
- 使用Python+OpenCV进行图像处理(三)| 视觉入门
检测是计算机视觉任务中的主要任务之一,而且应用很广泛.检测技术可以帮助人类检测那些容易被肉眼忽略的错误:也可以"帮助"自动驾驶汽车感知空间信息.无疑自动化的检测技术的广泛应用将为我 ...
- PHP7内核(八):深入理解字符串的实现
在前面大致预览了常用变量的结构之后,我们今天来仔细的剖析一下字符串的具体实现. 一.字符串的结构 struct _zend_string { zend_refcounted_h gc; /* 字符串类 ...
- python分布式接口,参数化实战二
1,先看一下接口测试用例 2,文件1:写get和post模板 import requestsclass PostGetModels: def isMethod(self,url,data,method ...
- 阿里云ECS(Ubuntu)单节点Kubernetes部署
参考资料: kubernetes官网英文版 kubernetes官网中文版 前言 这篇文章是比较久之前写的了,无聊翻了下博客发现好几篇博文排版莫名其妙的变了... 于是修改并完善了下.当初刚玩k8s的 ...
- thinkphp5.1中使用链式操作的坑
1.在进行tp5->tp5.1的时候,没有想太多,直接使用之前的代码:结果在该操作中,多次调用该get方法,tp5.1的链式操作一直保持了之前的搜索条件,截图如下:(具体的代码没有展示) 2.然 ...
- 实现ls
一.任务详情 参考伪代码实现ls的功能,提交代码的编译,运行结果截图,码云代码链接 打开目录文件 针对目录文件 读取目录条目 显示文件名 关闭文件目录文件 二.伪代码 opendir while(re ...
- 是什么是递归?-[all]-[编程理论]
递归是所有编程语言中,都会讨论到的一个问题. Content Of Table 递归的通俗认识 编程领域的抽象 一个最简单的示例 一点总结 栈溢出问题 本示例的一点拓展说明 ### 递归的通俗认识 编 ...
- testng.xml配置
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE suite SYSTEM "htt ...
- Python内置函数分类汇总
Python解释器内置了很多函数,这些内置函数使用方便,无需导入,直接调用.可以在交互模式下输入dir(__builtins__),输出的列表中包含了所有的内置函数: 1.可迭代对象.序列操作相关 ...