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)
随机推荐
- path-sum-ii leetcode C++
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- Android WebView 实现文件选择、拍照、录制视频、录音
原文地址:Android WebView 实现文件选择.拍照.录制视频.录音 | Stars-One的杂货小窝 Android中的WebView如果不进行相应的设置,H5页面的上传按钮是无法触发And ...
- 四种 AI 技术方案,教你拥有自己的 Avatar 形象
大火的 Avatar到底是什么 ? 随着元宇宙概念的大火,Avatar 这个词也开始越来越多出现在人们的视野.2009 年,一部由詹姆斯・卡梅隆执导 3D 科幻大片<阿凡达>让很多人认识了 ...
- SpringBoot2.x异步任务EnableAsync
1.springboot启动类里面使用@EnableAsync注解开启异步功能 @EnableAsync public class Demo001Application { public static ...
- Java——去掉小数点后面多余的0
当小数点后位数过多,多余的0没有实际意义,根据业务需求需要去掉多余的0.后端存储浮点型数据一般会用到Bigdecimal 类型,可以调用相关方法去掉小数后多余0,然后转为string. public ...
- python微服务
https://realpython.com/python-microservices-grpc/ https://github.com/saqibbutt/python-flask-microser ...
- Python 练习 进程
... """ 创建2个进程, 每一个进程都打出当前的时间和进程的标识,持续打十次. """ import multiprocessing ...
- 微信小程序(九)
小程序运行环境与基本架构 每个小程序都是运行在它所在的微信客户端上的,通过微信客户端给它提供的运行环境,小程序可以直接获取微信客户端的原生体验和原生能力. wxml视图文件和wxss样式文件都是对渲染 ...
- 在CentOS(Linux)下用TomCat部署完java项目后,在Windows下可以访问8080,但无法通过输入页面名.jsp进入页面
错误描述:今天第一次在linux下部署项目,写了个测试的项目,在CentOS下放行8080端口后,在Windows下可以访问8080,出现TomCat的欢迎页面,但想要进入某一个静态的jsp页面显示找 ...
- SCTL 涅槃重生:投入 RAL 的怀抱
在<DistSQL:像数据库一样使用 Apache ShardingSphere>一文中,PMC 孟浩然为大家介绍了 DistSQL 的设计初衷和语法体系,并通过实战操作展示了一条 SQL ...