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 ...
随机推荐
- coding++:mybatis update foreach (SQL循环)批量更新
今天要做批量更新的业务,采用 mybaits 的 foreach 动态语句,遇到一些问题做下记录. 参考示例(1): <update id="" parameterType= ...
- Linux虚拟机-CentOS7常用命令
1.查找虚拟机的ip地址:$ ifconfig ~inet 192.168.68.136
- [vijos1048]送给圣诞夜的贺卡<DFS剪枝>
题目链接:https://www.vijos.org/p/1048 很多人一看就想出了思路,不就是一个裸的dfs蛮...但是..在n<=50的情况下,朴素会直接tle..... 然后我就开始剪枝 ...
- M_map(五)
一.圆形区域的画图 1. clear all LATLIMS=[14 22]; LONLIMS=[108 118];%南海边界范围 m_proj('miller','lon',LONLIMS,'lat ...
- B 火车
时间限制 : 10000 MS 空间限制 : 565536 KB 评测说明 : 1.5s,512m 问题描述 A 国有n 个城市,城市之间有一些双向道路相连,并且城市两两之间有唯一路径.现在有火车 ...
- Java并发基础02. 传统线程技术中的定时器技术
传统线程技术中有个定时器,定时器的类是Timer,我们使用定时器的目的就是给它安排任务,让它在指定的时间完成任务.所以先来看一下Timer类中的方法(主要看常用的TimerTask()方法): 前面两 ...
- RedHat 6.7 下安装 Cadence IC617
操作系统:RedHat 6.7 搭建一个RedHat的本地源[1]: # mount -o /dev/cdrom1 /mnt # mkdir -p /opt/redhat/6.7 # cp -rv / ...
- ajax使用POST提交报错400
并非BadRequest!! 在用ajax访问登录接口的时候出现了这个错误,查阅得到使用Ajax的Post需要添加 contentType: "application/x-www-form- ...
- block 的内存结构衍生出来的面试题
今天在群里看到大佬们在讨论一个面试题,问如下代码在 32bit 和 64bit 系统上分别报什么错误: #import <Foundation/Foundation.h> int main ...
- Integer类的进制之间转换的方法
一.两个通用方法 1.public static String toString(int i,int radix) (1)作用 将十进制的数转化成指定进制数的字符串形式:radix参数指进制数: (2 ...