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. 2021CCPC华为云挑战赛 部分题题解

    CDN流量调度问题 题看了没多久就看出来是\(DP\)的题,然后就设了状态\(f[i][j]\)表示到前\(i\)个点时已经用了\(j\)个节点的最小总代价,结果发现转移时\(O(nm^2)\),但这 ...

  2. 『动善时』JMeter基础 — 56、JMeter使用命令行模式生成HTML测试报告

    目录 1.自动生成HTML图形化报告 2.使用已有的测试结果文件生成HTML报告 3.HTML图形化报告内容详解 (1)Dashboard页面:(重点查看) (2)Charts页面:(辅助分析) 4. ...

  3. openstack 后期维护(四)--- 删除僵尸卷

    前言: 在长时间使用openstack之后,删除虚机后,经常会有因这样那样的问题,导致卷处于僵尸状态,无法删除! 状态一: 虚机已近删除,然而卷却挂在到了 None上无法删除 解决办法: 1.# ci ...

  4. vscode + vim 全键盘操作高效搭配方案

    基础知识 vscode-vim vscode-vim是一款vim模拟器,它将vim的大部分功能都集成在了vscode中,你可以将它理解为一个嵌套在vscode中的vim. 由于该vim是被模拟的的非真 ...

  5. 【python+postman接口自动化测试】(1)网络基础知识

    一.IP地址 就像每个人都有一个身份证号码 IP地址是IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址. 查看IP命令: Windows: ipconfig Li ...

  6. Windows下git多用户配置

    refer from :https://blog.csdn.net/qq_39892503/article/details/109374201 windows git多用户配置 在安装git结束,我们 ...

  7. vue.js学习与实战笔记(1)

    公司需要开发一个小型官网,个人决定放弃angular2,使用vue来进行开发,由于是培训出生,思想一时难以转变,所以只能从零开始,下面奉上学习笔记 vue.js主要参考官网进行学习与开发 由于vue不 ...

  8. 力扣 - 剑指 Offer 22. 链表中倒数第k个节点

    题目 剑指 Offer 22. 链表中倒数第k个节点 思路1(栈) 既然要倒数第k个节点,那我们直接把所有节点放到栈(先进后出)里面,然后pop弹出k个元素就可以了 代码 class Solution ...

  9. 网络安全协议之IPsec

    声明 本文仅发表在博客园,作者LightningStar. 简介[1] IPSec(Internet 协议安全)是一个工业标准网络安全协议,工作在OSI模型的第三层,即网络层,为IP网络通信提供透明的 ...

  10. [loj3501]图函数

    $f(i,G)_{x}$为$x$对$i$是否有贡献,即在枚举到$x$时,$i$与$x$是否强连通 事实上,$f(i,G)_{x}=1$即不经过$[1,x)$中的点且$i$与$x$强连通 首先,当存在这 ...