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. 使用google zxing生成二维码图片

    生成二维码工具类: 1 import java.awt.geom.AffineTransform; 2 import java.awt.image.AffineTransformOp; 3 impor ...

  2. DDTP 分布式数据传输协议白皮书

    声明 本文非本人原创,主要参考文献[1]编写的阅读笔记.本博客仅发表在博客园,作者LightningStar,其他平台均为转载. 摘要 本白皮书对全球现有主要个人信息可携带权的实践模式进行梳理,分析其 ...

  3. istio基础详解

    1.Istio介绍? 官方文档:https://istio.io/docs/concepts/what-is-istio/ 中文官方文档:https://istio.io/zh/docs/concep ...

  4. pyinstaller设置图标出现“struct.error: unpack requires a buffer of 16 bytes”

    pyinstaller设置图标出现"struct.error: unpack requires a buffer of 16 bytes" 直接用png图片改后缀名为ico,然后p ...

  5. MyBatis-Plus 快速入门

    1.简介 MyBatis-Plus (简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发.提高效率而生. 1.1.特性 无侵入:只做增强不做改变, ...

  6. .net core api 请求实现接口幂等性

    简单实现接口幂等性,根据参数的hascode实现: 参数介绍  WaitMillisecond : 请求等待毫秒数 CacheMillisecond:请求结果缓存毫秒数 参数具体使用场景 WaitMi ...

  7. 问题 B: 喷水装置(二)(在c++上运行有错误,提交AC了)

    题目描述 有一块草坪,横向长w,纵向长为h,在它的橫向中心线上不同位置处装有n(n<=10000)个点状的喷水装置,每个喷水装置i喷水的效果是让以它为中心半径为Ri的圆都被润湿.请在给出的喷水装 ...

  8. 说透 Docker:基础

    既然要学习 K8S,相信各位读者都已经使用过 Docker 了,Docker 的入门是比较容易的,但 Docker 的网络和存储.虚拟化是相当复杂的,Docker 的技术点比较多,在本章中将会深入介绍 ...

  9. java miniui(datagrid) 取值赋值

    ... (本想放项目代码上来的 可是这放上去就看不了不知为何,下面是项目中的代码) // 获取时间设置到时间上,加载没有那个快,所以需要先加载完数据然后才能获取 function obtain(e) ...

  10. 保姆级别的vue + ElementUI 搭建后台管理系统教程

    vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问:https://gitee.com/szxio/vue2Admin,如果感觉对你有帮助,请点 ...