美文网首页工作生活
react动态添加样式:style和className

react动态添加样式:style和className

作者: milletmi | 来源:发表于2019-07-03 17:53 被阅读0次

    在react开发过程中,如何动态向元素内添加样式style或className

    className动态添加
    可以实现的语法如下:
    1、使用逻辑运算符

    <i className={value.checked && "active"} />
    

    2、使用三元运算符

    <i className={value.checked ? "active" : null} />
    

    3、使用函数

    getStyle() {
      return this.value.checkedr ? 'active' : '';
    }
    <i className={this.getStyle()} />
    

    4、数组语法

    <i className={["check-radio", value.checked ?"active":null].join(' ')}/> 
    

    5、使用ES6写法(推荐使用ES6写法)

    <i className={`check-radio ${ value.checked ?"active":null}`} />
    

    或者使用classnames依赖库

    style动态添加
    1、当前标签无其他class,并且只动态添加一个className

    <i style={{display: block ? 'block' : "none",color: 'red'}}/>
    <i style={ block ?  {display: 'block'} : { display: 'none'}}/>
    

    相关文章

      网友评论

        本文标题:react动态添加样式:style和className

        本文链接:https://www.haomeiwen.com/subject/qhychctx.html