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的更多相关文章

  1. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  2. 如何使用classnames模块库为react动态添加class类样式

    摘要 在react中添加动态的css时,传统的方式较为繁琐,今天刚好学习到一个模块库可以便捷的解决这个问题.对的,它就是“classnames”. classnames模块库 npm安装 npm in ...

  3. Javascrip动态添加样式,Dom操作,获取自定义属性

    var layer=document.querySelector('.layer') 添加样式: 添加单个样式: layer.style.display="block" 添加多个样 ...

  4. 【WPF】XAML引入资源和在C#代码中动态添加样式

    转载自: http://blog.csdn.net/honantic/article/details/48781543 XAML引入资源参考这里: http://blog.csdn.net/qq_18 ...

  5. javaScript动态添加样式

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload= ...

  6. JS检测浏览器版本信息(包含IE11),并动态添加样式

    <head runat="server"> <meta http-equiv="Content-Type" content="tex ...

  7. vue行内动态添加样式或者动态添加类名

    还是记录一下吧(๑•ᴗ•๑) <li :style="{backgroundImage:`url(${item.pic})`}" @click="chooseVip ...

  8. jq实现动态添加样式

    <script> $(function(){ $("#list_zlm > a").hover(function(){ $(this).addClass(&quo ...

  9. react动态添加多个输入框

    let obj = {} result.forEach(item =>{ obj[item.eleId] = item }) setFieldsValue(obj)

随机推荐

  1. Docker进阶一:网络篇

    理解Docker0 查看本地ip ip addr [root@VM-0-6-centos ~]# ip addr #本机回环地址 1: lo: <LOOPBACK,UP,LOWER_UP> ...

  2. LeetCode刷题 树专题

    树专题 关于树的几个基本概念 1 树的节点定义 2 关于二叉树的遍历方法 2.1 前序遍历 2.2 中序遍历 2.3 后序遍历 2.4 层序遍历 3 几种常见的树介绍 3.1 完全二叉树 3.2 二叉 ...

  3. springboot利用mock进行junit单元测试,测试controller

    1  spring-boot-starter-test内置mockito,添加pom依赖 <dependency> <groupId>org.springframework.b ...

  4. Oracle Error while trying to retrieve text for error ORA-01804

    我在Linux上编译C++程序,有这个错误. 本机情况: Linux上Oracle的安装情况,服务器上有两个Client版本.我在Makefile中使用了高版本的动态库. 原因: 1.首先排查下 tn ...

  5. Salesforce Consumer Goods Cloud 浅谈篇一之基础介绍

    本篇参考: https://baike.baidu.com/item/%E6%B6%88%E8%B4%B9%E5%93%81/425802?fr=aladdin https://help.salesf ...

  6. Java 中控制执行流程

    if-else 非常常用的流程控制非 if-else 莫属了,其中 else 是可选的,if 有两种使用方式 其一: if (Boolean-expression) { statement; } 其二 ...

  7. java meil

    import java.util.Date; import java.util.List; import java.util.Properties; import javax.activation.D ...

  8. 菜鸡的Java笔记 第十三 String 类的两种实例化方法

    String 类的两种实例化方法 String 类的两种实例化方式的区别 String 类对象的比较 Stirng 类对象的使用分析 /*    1.String 类的两种实例化方式的区别       ...

  9. Java安全之基于Tomcat的通用回显链

    Java安全之基于Tomcat的通用回显链 写在前面 首先看这篇文还是建议简单了解下Tomcat中的一些概念,不然看起来会比较吃力.其次是回顾下反射中有关Field类的一些操作. * Field[] ...

  10. [ccBB]Billboards

    参考loj2265中关于杨表的相关知识 先来考虑$m\mid n$的情况: 记$t=\frac{n}{m}$,将序列划分为$[1,m],[m+1,2m],...,[(t-1)m+1,tm]$这$t$段 ...