美文网首页
React动态绑定className

React动态绑定className

作者: _hider | 来源:发表于2019-10-15 15:21 被阅读0次

    要说到react绑定className,先要了解为何react用的是className,不像其它语言都是用class?这是因为classJavaScript中的保留关键字,而JSXJavaScript的扩展。这就是React不使用class而使用className的主要原因

    常规的绑定

    <div className="title">标题</div>
    

    动态绑定className

    如果需要根据stateaddColor来判断是否添加color,需要如下写法(两种)。

    //ES6 模板字符串
    <p className={`title ${this.state.addColor?'color':null}`}>标题</p>
    //join("")
    <p className={['title',this.state.addColor?'color':null].join(' ')}>标题</p>
    

    接下来推荐一种目前比较主流的动态绑定className的工具。它就是classnames

    下载方式
    npm install classnames
    
    使用
    <p className={classnames({
        title:true,
        color:this.state.addColor
    })}>标题</p>
    

    classnames的写法是比较直观的,可以对传入的class进行比较明显的动态判断,除了以上这种写法,classnames还可以支持以下多种写法:

    //基础用法
    classnames('bold','center') // => 'bold center'
    classnames('bold',{'center':true}) // => 'bold center'
    classnames('bold',{'center':false}) // => 'bold'
    
    //各种各样属性结合
    classnames('bold',{'center':true,'break':false},{'color':true}) // => 'bold center color'
    
    // 一些不存在/空的属性会自动忽略
    classNames(null, false, 'bold', undefined, 0, 1, { baz: null }, ''); // => 'bold 1'
    
    //数组会遍历输出
    let classnamesArr = [{'center':true,'break':false},'title'];
    classnames('bold',classnamesArr); // => 'bold center title'
    
    //字符串模板方式
    let fontStyle = 'weight';
    classnames(`font-${fontStyle}`); // => 'font-weight'
    classnames({[`font-${fontStyle}`]:true}); // => 'font-weight'

    相关文章

      网友评论

          本文标题:React动态绑定className

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