1、定义变量

  1. const divStyle: React.CSSProperties = {
  2. width: "11rem",
  3. height: "7rem",
  4. backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`
  5. };

使用:

  1. <div style={divStyle} />

2、定义函数

  1. interface SidebarProps {
  2. isVisible: boolean;
  3. }
  4.  
  5. const divStyle = (props: SidebarProps): React.CSSProperties=>({
  6. width: props.isVisible ? "23rem" : "0rem"
  7. })
  8.  
  9. export const SidebarComponent: React.StatelessComponent<SidebarProps> = props => (
  10. <div style={divStyle(props)}>
  11. {props.isVisible}
  12. </div>
  13. )
  1. const divStyle = (props: SidebarProps): React.CSSProperties=>({
  2. width: props.isVisible ? "23rem" : "0rem"
  3. })
  4.  
  5. 返回值为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. 判断元素的16中方法expected_conditions

    from selenium.webdriver.support import expected_conditons as EC 1.title_is:判断当前页面的title是否完全等于预期字符串,返 ...

  2. PAT 1071 Speech Patterns[一般]

    1071 Speech Patterns (25 分) People often have a preference among synonyms of the same word. For exam ...

  3. tkprof工具详解二

      TKPROF是一个可执行文件,自带在Oracle Server软件中,无需额外的安装. 该工具文件可以用来解析ORACLE的SQL TRACE(10046) 以便生成更可读的内容.  实际上tkp ...

  4. Appium的Java封装

    文章出处 http://blog.csdn.net/niubitianping/article/details/52612211 一.为什么需要封装? 封装的本意就是为了方便.简洁. 二.Androi ...

  5. Eclipse 中安装Browse Deployment Location插件

    Browse Deployment Location 功能的插件名称为: Pivotal tc Server Integration for Eclipse  可在Eclippse的Eclipse M ...

  6. node-inspector使用方法

    开发node.js程序使用的是javascript语言,其中最麻烦的还是调试,这里介绍一下node-inspector使用方法.具体资料可以看参考资料中的GITHUB文档. 方法/步骤   使用命令$ ...

  7. Action Results in Web API 2

    https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/action- ...

  8. KMP(转自matrix67)

    蒟蒻笔者自己发现matrix67大佬讲的十分明白,然后现在网络上的排版也是有些微的问题,就稍稍改了一下,然后把代码改成了c++的. 如果机房马上要关门了,或者你急着要和MM约会,请直接跳到第六个自然段 ...

  9. 【bzoj5452】[Hnoi2016]大数(莫队)

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=4542 首先若p=2,5则这题就是道傻逼题,前缀和搞一下没了.如果p为其他质数,那么可以 ...

  10. Eclipse 添加JSP模板

    0.环境 Eclipse IDE for Java EE Developers (4.3.2) win8.1系统 1.原因 Eclipse自带新建JSP为: <%@ page language= ...