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的更多相关文章

  1. React Hooks: useCallback理解

    useCallback把匿名回调“存”起来 避免在component render时候声明匿名方法,因为这些匿名方法会被反复重新声明而无法被多次利用,然后容易造成component反复不必要的渲染. ...

  2. 理解 React Hooks 心智模型:必须按顺序、不能在条件语句中调用的规则

    前言 自从 React 推出 hooks 的 API 后,相信大家对新 API 都很喜欢,但是它对你如何使用它会有一些奇怪的限制.比如,React 官网介绍了 Hooks 的这样一个限制: 不要在循环 ...

  3. React Hooks简单业务场景实战(非源码解读)

    前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...

  4. 通过 React Hooks 声明式地使用 setInterval

    本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...

  5. 初探React Hooks & SSR改造

    Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...

  6. React hooks实践

    前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...

  7. React Hooks新特性学习随笔

    React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...

  8. 关于React Hooks,你不得不知的事

    React Hooks是React 16.8发布以来最吸引人的特性之一.在开始介绍React Hooks之前,让咱们先来理解一下什么是hooks.wikipedia是这样给hook下定义的: In c ...

  9. react hooks 全面转换攻略(三) 全局存储解决方案

    针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 redux-re ...

随机推荐

  1. ​GAN的五大有趣应用

    引言 你能看出这张照片中面部的共同点吗? 这些人都不是真实存在的!这些面部图像都是由GAN技术生成的. "GAN"这个词是由Ian Goodfellow在2014年提出的,但相关概 ...

  2. “GANs”与“ODEs”:数学建模的终结?

    在本文中,我想将经典数学建模和机器学习之间建立联系,它们以完全不同的方式模拟身边的对象和过程.虽然数学家基于他们的专业知识和对世界的理解来创建模型,而机器学习算法以某种隐蔽的不完全理解的方式描述世界, ...

  3. 【Pytest03】全网最全最新的Pytest框架fixture应用篇(1)

    fixtrue修饰器标记的方法通常用于在其他函数.模块.类或者整个工程调用时会优先执行,通常会被用于完成预置处理和重复操作.例如:登录,执行SQL等操作. 完整方法如下:fixture(scope=' ...

  4. web样式css

    css样式 什么是css 层叠样式表(Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  5. mybatis入门四 解决字段名与实体类属性名不相同的冲突

    一.创建测试需要使用的表和数据 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(20), ...

  6. [bzoj]1053反质数<暴搜>

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1053 感想:这道题拿到以后还是想去知道一个数的约数个数要怎么求,去网上搜了公式,但是还是没有思 ...

  7. MATLAB 排序、拟合

    一.数据排序整合 1.随机生成的数,从小到大排序 clear rand('seed',1)%设置随机种子,确保随机数一样 edge_range=unifrnd (1, 10, 1, 10) edge_ ...

  8. lly的瞬移方块(并查集)

    lly的瞬移方块 Description llyllylly最近发明了一个叫瞬移方块的游戏,为啥llyllylly这么闲呢,这得从一只蝙蝠说起..... llyllylly决定给大家也分享一下这个游戏 ...

  9. 关于 Vue 中 我对中央事线管理器的(enentBus)误解

    由于这段时间公司比较闲,就对vue 中的一些模糊的点做了一些加强,突然就想到了常挂在嘴边兄弟组件传值 我理解的兄弟组件的传值是可以跨理由传值的,比如我从http://localhost:8080/lo ...

  10. 从春节送祝福谈谈 IO 模型(二)

    上期结合程序员小猿用温奶器给孩子热奶的故事,把面试中常聊的“同步.异步与阻塞.非阻塞有啥区别”简单进行普及. 不过,恰逢春节即将到来,应个景,不妨就通过实现新春送祝福的需求,深入了解一下 Java I ...