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)
随机推荐
- ansible安装和批量执行命令
yum install -y ansible 编辑 /etc/ansible/hosts 文件 # This is the default ansible 'hosts' file.## It sho ...
- Centos 系统常用编译环境
centos编译环境配置 yum install -y autoconf make automake gcc gcc-c++
- pycharm安装指导教程
pycharm下载安装教程 1.pycharm下载官网 http://www.jetbrains.com/pycharm/ 2.下载好安装包后双击点开安装包文件,这边以专业版为例 按以上图片所示教程, ...
- MAC安装vue.js
一.下载node node下载地址:https://nodejs.org/en/download/ 下载后点击安装即可. node -v 检查安装是否成功 二.安装 淘宝镜像 (npm) npm in ...
- Celery Received unregistered task of type
celery -A proj worker --loglevel=info 这个错误原因在于proj这里没有包含对应的task, 可以在这里导入需要的task即可
- 分布式配置系统Apollo如何实时更新配置的?
引言 记得我们那时候刚开始学习Java的时候都只是一个单体项目,项目里面的配置基本都是写在项目里面的properties文件中,比如数据库配置啥的,各种逻辑开关,一旦这些配置修改了,还需要重启项目这修 ...
- jpg与jpeg的区别在哪
JPG文件的优点是体积小巧,并且兼容性好,因为大部分的程序都能读取这种文件,这是因为JPG格式不仅是一个工业标准格式,而且更是web的标准文件格式.JPG文件如此拥有如此便利的条件,难怪得到了业余玩家 ...
- [bzoj2432]兔农
将每一个重置为0的点作为一段,那么它会导致后面为以x x为开头的斐波拿起数列的东西,那么设这一段是以x为开头,要快速转移到下一段,就可以解决这道题目为了转移,我们要处理出下面的东西:1.求出x关于模k ...
- 学以致用 | Redis概念与简单实操
Redis概念 Redis是一个由C语言编写.基于key-value存储结构的开源NoSQL数据库,其读写速度为10万次/秒,这个速度已经远远大于传统的关系型数据库. 使用场景 在高并发的情况下,可将 ...
- 设计模式学习-使用go实现访问者模式
访问者模式 定义 优点 缺点 适用范围 代码实现 什么是 Double Dispatch 参考 访问者模式 定义 访问者模式(Visitor):表示一个作用于某对象结构中的各元素的操作.它使你可以在不 ...