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. 腾讯云星星海SA2云服务器特点

    一.腾讯云星星海SA2云服务器特点 腾讯云深度定制AMD处理器.AMD EPYC ROME ,频率3.3Ghz.提供超大单核 L3 Cache.(基础频率2.6Ghz,睿频3.3Ghz).企业级服务器 ...

  2. MyScript 开发文档

    一.IInk SDK runtime 1.1 引擎创建 1.2 对象释放 1.3 获取并设置配置 配置 访问配置 配置识别 二.文件存储 2.1 支持的内容的类型 2.2 模型结构 2.3 Conte ...

  3. Part 37 Difference between $scope and $rootScope

    In this video we will discuss the difference between $scope and $rootScope. The main difference is t ...

  4. 问题 B: 比大小

    题目描述 给你两个很大的数,你能不能判断出他们两个数的大小呢? 比如123456789123456789要大于-123456 输入 每组测试数据占一行,输入两个不超过1000位的10进制整数a,b 数 ...

  5. [atARC115F]Migration

    称$k$个物品的位置$(a_{1},a_{2},...,a_{k})$为一个状态,并设初始状态为$S$,结束状态为$T$ 定义状态的比较:首先根据$\sum_{i=1}^{k}h_{a_{i}}$,即 ...

  6. [atARC112E]Rvom and Rsrev

    毒瘤分类讨论题 (注:以下情况都有"之前的情况都不满足的"前提条件,并用斜体表示一些说明) Case0:若$|s|\le 2$,直接输出即可,因此假设$|s|>3$ 首先,我 ...

  7. [bzoj3524]Couries

    首先用到bzoj2456的做法,因为要求这个数出现次数超过了一半,如果其与不同的数两两相消的话最终一定会剩下自身(如果不保证存在可能会剩下别的,但保证存在了只会剩下自身),然后再用可持久化线段树维护即 ...

  8. 【IDEA】IntelliJ IDEA 2020.1破解版

    IntelliJ IDEA 2020.1破解版 2020-09-09  14:58:56  by冲冲 安装链接: 1. 百度网盘下载地址链接:https://pan.baidu.com/s/1cxjz ...

  9. C/C++ Qt TreeWidget 单层树形组件应用

    TreeWidget 目录树组件,该组件适用于创建和管理目录树结构,在开发中我们经常会把它当作一个升级版的ListView组件使用,因为ListView每次只能显示一列数据集,而使用TableWidg ...

  10. jvm的垃圾回收

    首先类加载的过程:加载验证准备解析初始化 类加载器: jvm内存模型图: 空着,等以后补上 jvm垃圾收集器 目前只知道,parnew,cms,g1 parnew新生代垃圾回收器,复制算法 cms复制 ...