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

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

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

  2. 初探React Hooks & SSR改造

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

  3. React hooks实践

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

  4. 理解 React Hooks

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...

  5. React Hooks新特性学习随笔

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

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

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

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

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

  8. react新特性 react hooks

    本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...

  9. 30分钟精通React今年最劲爆的新特性——React Hooks

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...

  10. React Hooks 深入系列 —— 设计模式

    本文是 React Hooks 深入系列的后续.此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子 ...

随机推荐

  1. 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 ...

  2. Tornado介绍与其Web应用结构

    1.介绍 tornado是一个Python web框架和异步网络库 起初由 FriendFeed 开发. 通过使用非阻塞网络I/O, Tornado 可以支持上万级的连接,处理 长连接, WebSoc ...

  3. 深入ff and ffbase

    用ff 包读取一个csv 文件 >options(fftempdir = [二进制文件存放的位置]) >file_chunks <- read.csv.ffdf(file=”big_ ...

  4. python全栈开发从入门到放弃之字符串的应用

    1.strip strip 脱去(...的)衣服 去掉左右两边的空白msg=' hellprint(msg) 1 print(msg.strip()) #去掉左右两边的空白 2 3 hello 4 h ...

  5. Sql case when 小例

    SELECT I.uname, C.consume, O.name,O.dis_count,O.memberType, D.name,D.dis_count,D.up,D.down, CASE WHE ...

  6. Linux Shell编程第4章——sed和awk

    目录 sed命令基本用法 sed命令实例 命令选项 文本定位 编辑命令 awk编程模型 awk编程实例 1.awk模式匹配 2.记录和域 3.关系和布尔运算符 4.表达式 5.系统变量 6.格式化输出 ...

  7. HDU - 2819 Swap (二分图匹配-匈牙利算法)

    题意:一个N*N的01矩阵,行与行.列与列之间可以互换.要求变换出一个对角线元素全为1的矩阵,给出互换的行号或列号. 分析:首先一个矩阵若能构成对角线元素全为1,那么矩阵的秩为N,秩小于N的情况无解. ...

  8. 20145120黄玄曦《网络对抗》Web基础

    20145120黄玄曦<网络对抗>Web基础 回答问题 (1)什么是表单 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的 ...

  9. Java_Chapter6_类与对象

    6.1 类与对象的概念 6.2 定义类 class Cylinder { double radius; int height; double pi; void setCylinder(double r ...

  10. Linux系统下使用pwgen生成密码的使用教程

    pwgen生成的密码易于记忆且相当安全.从技术上来说,容易记忆的密码不会比随机生成的密码更加安全.但是,在大多数情况下,pwgen生成的密码已经足够安全,除了网银密码等需要高安全等级的情况外.使用易于 ...