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 ...
随机推荐
- GAN的五大有趣应用
引言 你能看出这张照片中面部的共同点吗? 这些人都不是真实存在的!这些面部图像都是由GAN技术生成的. "GAN"这个词是由Ian Goodfellow在2014年提出的,但相关概 ...
- “GANs”与“ODEs”:数学建模的终结?
在本文中,我想将经典数学建模和机器学习之间建立联系,它们以完全不同的方式模拟身边的对象和过程.虽然数学家基于他们的专业知识和对世界的理解来创建模型,而机器学习算法以某种隐蔽的不完全理解的方式描述世界, ...
- 【Pytest03】全网最全最新的Pytest框架fixture应用篇(1)
fixtrue修饰器标记的方法通常用于在其他函数.模块.类或者整个工程调用时会优先执行,通常会被用于完成预置处理和重复操作.例如:登录,执行SQL等操作. 完整方法如下:fixture(scope=' ...
- web样式css
css样式 什么是css 层叠样式表(Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- mybatis入门四 解决字段名与实体类属性名不相同的冲突
一.创建测试需要使用的表和数据 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(20), ...
- [bzoj]1053反质数<暴搜>
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1053 感想:这道题拿到以后还是想去知道一个数的约数个数要怎么求,去网上搜了公式,但是还是没有思 ...
- MATLAB 排序、拟合
一.数据排序整合 1.随机生成的数,从小到大排序 clear rand('seed',1)%设置随机种子,确保随机数一样 edge_range=unifrnd (1, 10, 1, 10) edge_ ...
- lly的瞬移方块(并查集)
lly的瞬移方块 Description llyllylly最近发明了一个叫瞬移方块的游戏,为啥llyllylly这么闲呢,这得从一只蝙蝠说起..... llyllylly决定给大家也分享一下这个游戏 ...
- 关于 Vue 中 我对中央事线管理器的(enentBus)误解
由于这段时间公司比较闲,就对vue 中的一些模糊的点做了一些加强,突然就想到了常挂在嘴边兄弟组件传值 我理解的兄弟组件的传值是可以跨理由传值的,比如我从http://localhost:8080/lo ...
- 从春节送祝福谈谈 IO 模型(二)
上期结合程序员小猿用温奶器给孩子热奶的故事,把面试中常聊的“同步.异步与阻塞.非阻塞有啥区别”简单进行普及. 不过,恰逢春节即将到来,应个景,不妨就通过实现新春送祝福的需求,深入了解一下 Java I ...