react动态添加样式:style和className
react开发过程中,经常会需要动态向元素内添加样式style或className,那么应该如何动态添加呢???
一、react向元素内,动态添加style
例如:有一个DIV元素, 需要动态添加一个 display:block | none 样式, 那么:
<div style={{display: (index===this.state.currentIndex) ? "block" : "none"}}>此标签是否隐藏</div>
或者, 多个样式写法:
<div style={{display: (index===this.state.currentIndex) ? "block" : "none", color:"red"}}>此标签是否隐藏</div>
二、react向元素内,动态添加className
比如:
1、DIV标签中,没有其他class,只需要动态添加一个.active的className,来显示内容是否被选中状态,则:
<div className={index===this.state.currentIndex?"active":null}>此标签是否选中</div>
2、如果DIV标签本身有其他class,又要动态添加一个.active的className,来显示内容是否被选中状态,则:
<div className={["container tab", index===this.state.currentIndex?"active":null].join(' ')}>此标签是否选中</div>
或者,使用ES6写法(推荐使用ES6写法):
<div className={`container tab ${index===this.state.currentIndex?"active":null}`}>此标签是否选中</div>
react动态添加样式:style和className的更多相关文章
- js动态创建样式: style 和 link
js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...
- 如何使用classnames模块库为react动态添加class类样式
摘要 在react中添加动态的css时,传统的方式较为繁琐,今天刚好学习到一个模块库可以便捷的解决这个问题.对的,它就是“classnames”. classnames模块库 npm安装 npm in ...
- Javascrip动态添加样式,Dom操作,获取自定义属性
var layer=document.querySelector('.layer') 添加样式: 添加单个样式: layer.style.display="block" 添加多个样 ...
- 【WPF】XAML引入资源和在C#代码中动态添加样式
转载自: http://blog.csdn.net/honantic/article/details/48781543 XAML引入资源参考这里: http://blog.csdn.net/qq_18 ...
- javaScript动态添加样式
[动态添加css样式] <html> <head> <script type="text/javascript"> window.onload= ...
- JS检测浏览器版本信息(包含IE11),并动态添加样式
<head runat="server"> <meta http-equiv="Content-Type" content="tex ...
- vue行内动态添加样式或者动态添加类名
还是记录一下吧(๑•ᴗ•๑) <li :style="{backgroundImage:`url(${item.pic})`}" @click="chooseVip ...
- jq实现动态添加样式
<script> $(function(){ $("#list_zlm > a").hover(function(){ $(this).addClass(&quo ...
- react动态添加多个输入框
let obj = {} result.forEach(item =>{ obj[item.eleId] = item }) setFieldsValue(obj)
随机推荐
- linux环境下redis安装(redis伪集群搭建)
redis在linux环境下搭建 1.创建目录 [root@192 local]# mkdir /usr/local/redis 2.下载redis,并解压 [root@192 local]# wge ...
- HCNP Routing&Switching之BGP路由过滤和AS-Path-Filter
前文我们聊了下通过修改BGP路由属性来影响路由,从而达到控制BGP路由的目的:回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15495585.html:今天我们 ...
- JDK 之 Arrays.asList - 源码分析
Arrays工具类提供了一个方法asList, 使用该方法可以将一个变长参数或者数组转换成List . 其源代码如下: @SafeVarargs public static <T> Lis ...
- Part 34 AngularJS controller as vs scope
There are 2 ways to expose the members from the controller to the view - $scope and CONTROLLER AS. T ...
- Java学习(二十)
今天学习了Java中的package和import 在包中写了一点作为练习 如果把Test02放到别的包,就需要import到别的包,就像这样,Test02在HelloWorld包 如果删掉impor ...
- [第二章]c++学习笔记3(构造函数)
成员函数的一种 (1)名字与类名相同,可以有参数,不能有返回值(void也不行) (2)作用是对对象初始化,如给成员变量赋初值 (3)如果定义类时没写构造函数,则编译器生成一个默认的无参数的构造函数( ...
- Spring Boot中如何自定义starter?
Spring Boot starter 我们知道Spring Boot大大简化了项目初始搭建以及开发过程,而这些都是通过Spring Boot提供的starter来完成的.品达通用权限系统就是基于Sp ...
- Linux驱动实践:带你一步一步编译内核驱动程序
作 者:道哥,10+年嵌入式开发老兵,专注于:C/C++.嵌入式.Linux. 关注下方公众号,回复[书籍],获取 Linux.嵌入式领域经典书籍:回复[PDF],获取所有原创文章( PDF 格式). ...
- Chrome handless无界面浏览器的脚本操作
1.什么是Phantomjs (已经停止更新) 是一个无界面的浏览器 支持页面元素查找,js的执行等 由于不进行css和gui渲染,运行效率要比真实的浏览器要快很多 2.如何使用Phantomjs? ...
- 面霸篇:Java 集合容器大满贯(卷二)
面霸篇,从面试角度作为切入点提升大家的 Java 内功,所谓根基不牢,地动山摇. 码哥在 <Redis 系列>的开篇 Redis 为什么这么快中说过:学习一个技术,通常只接触了零散的技术点 ...