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. Ubuntu 16.04 安装 JDK 及 Eclipse 详细步骤(转发:https://blog.csdn.net/bluish_white/article/details/56509446)

    2017.3.1更新 修正了一些命令,现在按照文章步骤配置不会出现问题了. JDK 安装及配置 参考来源:http://www.linuxidc.com/Linux/2017-02/140908.ht ...

  2. Python集合方法整理(Day9)

    #作用:去重,关系运算, #定义: 知识点回顾 可变类型是不可hash类型 不可变类型是可hash类型 #定义集合: 集合:可以包含多个元素,用逗号分割, 集合的元素遵循三个原则: 1:每个元素必须是 ...

  3. Bootstrap实现的页面

    实现的效果如图,使用bootstrap需要至少三个文件 去bootstrap网上下载,然后使用这三个文件可以了 使用方式,通过标签,class命名来引用已经定制好的html样式 <!DOCTYP ...

  4. Fatal error in launcher: Unable to create process using '"'的报错解决

    执行命令前加python -m就好了 python -m pip install --upgrade pip这条命令用来升级pip

  5. Oracle 在64位机器上使用plSQL连接Oracle的问题(SQL*Net not properly installed)

    问题: 在64位机器上了64位的oracle客户端. 然后装上PL/SQL Developer,但是连接oracle老报这个错: Initialization error      SQL*Net n ...

  6. 在python中打开文件显示没有权限PermissionError: [Errno 13] Permission denied:

    不多说了,我犯了低级错误 ,文件路径搞错了

  7. PHP 留言板练习

    登录页面同session一样 login页面 <form action="loginchuli.php" method="post"> <di ...

  8. java synchronized和(ReentrantLock)区别

    原文:http://blog.csdn.net/zheng548/article/details/54426947 区别一:API层面 syschronized使用 synchronized即可修饰方 ...

  9. python继承,判断类型,多态

    1.python中继承 如果已经定义了Person类,需要定义新的Student和Teacher类时,可以直接从Person类继承: class Person(object): def __init_ ...

  10. Python3,x:如何进行手机APP的数据爬取

    Python3,x:如何进行手机APP的数据爬取 一.简介 平时我们的爬虫多是针对网页的,但是随着手机端APP应用数量的增多,相应的爬取需求也就越来越多,因此手机端APP的数据爬取对于一名爬虫工程师来 ...