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>

  • 相关阅读:
    HttpURLConnection请求网络数据的GET请求
    ImageLoader的Jar包加载图片
    使用HttpUtils 上传视频文件
    VideoView的视频播放
    VideoView的视频的全屏播放
    Android中在activity中弹出一个popwindow
    随心而记
    Java -- springboot 配置 freemarker
    Tensorflow替换静态图中的OP
    python 系统定时关机
  • 原文地址:https://www.cnblogs.com/magicg/p/15413484.html
Copyright © 2011-2022 走看看