zoukankan      html  css  js  c++  java
  • react动态添加样式:style和className

    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>

  • 相关阅读:
    Java中的匿名对象
    Java决策制定
    「干货总结」程序员必知必会的十大排序算法
    阿里开发手册之ArrayList正确操作方式
    Java中this关键字的使用
    Java封装的概念详解
    【C++】数组的最大子数组
    第二章:分治I
    【C++】归并排序
    第一章:算法绪论
  • 原文地址:https://www.cnblogs.com/magicg/p/15413484.html
Copyright © 2011-2022 走看看