• 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>

  • 相关阅读:
    day06
    样式表
    框架&样式表
    表单
    用表格制作百度首页
    汉企教育实训第第二天
    汉企教育实训第一天感想
    BootStrap前端框架
    MySQL存储过程、存储函数介绍
    日常记录
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/12929129.html
Copyright © 2020-2023  润新知