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. Luogu P1850 [NOIp2016提高组]换教室 | 期望dp

    题目链接 思路: <1>概率与期望期望=情况①的值*情况①的概率+情况②的值*情况②的概率+--+情况n的值*情况n的概率举个例子,抛一个骰子,每一面朝上的概率都是1/6,则这一个骰子落地 ...

  2. Vue-cli4.xPC端项目Rem适配

    适配准备 安装 (amfe-flexible) 和(postcss-px2rem) 1, 安装依赖并在main.js中引入该依赖 npm i amfe-flexible import "am ...

  3. 五(二)、spring 声明式事务xml配置

    概述: 接着上一节内容,把注解配置@@Transactional形式改为xml配置形式: 一.配置步骤 1.配置事务管理器 1 <!-- 1配置事务管理器 --> 2 <bean i ...

  4. 【数据结构&算法】12-线索二叉树

    目录 前言 线索二叉树的概念 线索二叉树的实现 线索二叉树的寻点思路二 类双向链表参考图 参考代码 中序遍历线索化 前言 在<大话数据结构>P190 页中有一句话:其实线索二叉树,就等于是 ...

  5. Part 61 to 63 Talking about partial class and partial method in C#

    部分类和部分方法 部分类是用partial声明的类,它允许我们把一个类分割成两个或多个类,当应用程序编译的完成的时候,多个部分类会结合成一个类,同时partial关键字也可以用于声明结构和接口. 那么 ...

  6. 12组-Alpha冲刺-4/6

    侯钦凯 过去两天完成了哪些任务 完善UI界面,复习考试 展示GitHub当日代码/文档签入记录 接下来的计划 复习考试,准备答辩 还剩下哪些任务 博客和答辩 燃尽图(团队整体) 遇到了哪些困难 在部分 ...

  7. python实现图像直方图

    目录: (一)直方图的使用 正文: (一)直方图的使用 1 from matplotlib import pyplot as plt 2 def plot_demo(image): 3 print(i ...

  8. [cf1178G]The Awesomest Vertex

    2020年论文题,这里给出了一个$o(n\log^{2}n+m\log^{3}n)$的做法,例题3即为原题 1.例题1 题面 给定$n$个一次函数$f_{i}(x)$,$m$次查询$F(x)=\max ...

  9. [loj3014]独特的城市

    约定:一棵树的深度定义为其中到根最远的点到根的距离 考虑节点$x$的答案: 任取一条直径,根据直径的性质,到$x$较远的直径端点一定是到$x$最远的点之一 由此,不难证明对于$x$独特的点,一定在$x ...

  10. [cf741C]Arpa’s overnight party and Mehrdad’s silent entering

    直接令2i-1和2i的位置不相同,相当于有2n条边,对其进行二分图染色即可(这张图一定不存在奇环). 假设给出的n条关系是A类边,2i-1和2i的边是B类边,可以发现一条路径一定是AB交替(因为A/B ...