react-hooks: CSSProperties
1、定义变量
const divStyle: React.CSSProperties = {
width: "11rem",
height: "7rem",
backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`
};
使用:
<div style={divStyle} />
2、定义函数
interface SidebarProps {
isVisible: boolean;
}
const divStyle = (props: SidebarProps): React.CSSProperties=>({
width: props.isVisible ? "23rem" : "0rem"
})
export const SidebarComponent: React.StatelessComponent<SidebarProps> = props => (
<div style={divStyle(props)}>
{props.isVisible}
</div>
)
const divStyle = (props: SidebarProps): React.CSSProperties=>({
width: props.isVisible ? "23rem" : "0rem"
})
返回值为React.CSSProperties类型
react-hooks: CSSProperties的更多相关文章
- 通过 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
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...
- 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 ...
- react新特性 react hooks
本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...
- 30分钟精通React今年最劲爆的新特性——React Hooks
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...
- React Hooks 深入系列 —— 设计模式
本文是 React Hooks 深入系列的后续.此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子 ...
随机推荐
- tf.clip_by_value:将tensor中的0和NONE进行范围限制的函数
tf.clip_by_value clip_by_value( t, clip_value_min, clip_value_max, name=None) Defined in ...
- SQL基础一
一.什么是SQL? SQL是结构化查询语言 SQL使我们有能力访问数据库 SQL是一种ANSI的标准计算机语言 二.SQL能做什么? SQL 面向数据库执行查询 SQL 可从数据库取回数据 SQL 可 ...
- 推荐系统第2周--itemCF和userCF
推荐系统分类 基于应用领域分类:电子商务推荐,社交好友推荐,搜索引擎推荐,信息内容推荐基于设计思想:基于协同过滤的推荐,基于内容的推荐,基于知识的推荐,混合推荐基于使用何种数据:基于用户行为数据的推荐 ...
- Spark学习笔记--安装SCALA和IDEA开发环境
一:安装Scala
- String与其他类型的转换
首先,对于String类有一点是毫无疑问的:对String对象的任何改变都不影响到原对象,相关的任何change操作都会生成新的对象. 一. String与StringBuilder.StringBu ...
- TCP三次“握手”与4次“挥手”
OSI(Open System Interconnection,开放系统互联)七层网络模型成为开放式系统互联参考模型,是一个把网络通信在逻辑上的定义,也可以理解成为定义了通用的网络通信规范.而我们的数 ...
- HackerRank - powers-game-1 【博弈论】
HackerRank - powers-game-1 [博弈论] 题意 给出 * 2^1 * 2^2 * 2^3 * 2^4 * 2^5 * 2^n 这一串东西 ,然后有两个玩家,*号是可以被替换掉的 ...
- hdu 1686 Oulipo kmp算法
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=1686 题目: Problem Description The French author George ...
- 亿能测试大讲堂 - YY在线课程[ 测试人员需要掌握的Shell脚本编程 ]
亿能测试大讲堂 - YY在线课程[ 测试人员需要掌握的Shell脚本编程 ]http://automationqa.com/forum.php?mod=viewthread&tid=2453& ...
- hadoop07---synchronized,lock
synchronized 锁是jvm控制的,控制锁住的代码块只能有一个线程进入.线程执行完了锁自动释放,抛出异常jvm会释放锁. synchronized的缺陷 1.如果一个线程被阻塞了,其余的线程 ...