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)
随机推荐
- Luogu P1563 [NOIp2016提高组]玩具谜题 | 模拟
题目链接 纯模拟题,没啥好说的,就是要判断地方有点多,一定要注意细节. #include<iostream> #include<cstdio> #include<fstr ...
- SpringBoot教程(学习资源)
SpringBoot教程 SpringBoot–从零开始学SpringBoot SpringBoot教程1 SpringBoot教程2 --SpringBoot教程2的GitHub地址 SpringB ...
- 基于SpringBoot项目MyBatis分页插件实现分页总结
前言 在使用Mybatis时,最头痛的就是写分页了,需要先写一个查询count的select语句,然后再写一个真正分页查询的语句,当查询条件多了之后,会发现真的不想花双倍的时间写 count 和 se ...
- 原生css实现fullPage的整屏滚动贴合
目录 1,前言 2,效果展示 3,属性说明 3.1 scroll-snap-type 3.2,scroll-snap-align 4,实际使用 4.1,兼容性 1,前言 今天摸鱼的时候,发现一个很有意 ...
- FastJson 解析、序列化及反序列化
一.环境准备:使用maven特性在pom.xml中导入fastjson的依赖包 <!-- https://mvnrepository.com/artifact/com.alibaba/fastj ...
- 《手把手教你》系列技巧篇(四十)-java+ selenium自动化测试-JavaScript的调用执行-下篇(详解教程)
1.简介 在实际工作中,我们需要对处理的元素进行高亮显示,或者有时候为了看清楚做跟踪鼠标点击了哪些元素需要标记出来.今天宏哥就在这里把这种测试场景讲解和分享一下. 2.用法 创建一个执行 JS 的对象 ...
- Numpy (嵩老师.)
import numpy as np Numpy 一元函数 对ndarray中的数据执行元素级运算的函数 np.abs(x) np.fabs(x) 计算数组各元素的绝对值 np.sqrt(x) 计算数 ...
- [cf611H]New Year and Forgotten Tree
首先,来构造这棵树的形态 称位数相同的点为一类点,从每一类点中任选一个点,具有以下性质: 1.每一类中选出的点的导出子图连通(是一颗树) 2.每一条边必然有一个端点属于某一类中选出的点 (关于&quo ...
- Linux下Zabbix5.0 LTS添加自定义监控项
自定义监控项 zabbix本身提供了很多可选的监控项,可以满足绝大部分的监控需求.有时候由于业务需求,需要自定义监控项. 下面以创建mysql自定义监控项为例,分享如何创建zabbix自定义监控项. ...
- 由于vue的for循环id并不严谨,提高id严谨性
如果后台没有传入id,我们拿到的数据没有id修改等操作不方便,如何拿到id呢 https://github.com/dylang/shortid 提供唯一id 插件的引入和使用: <templa ...