classnames 使用方法

 

 

 

import React, { PureComponent } from 'react'

// yarn add classnames

import classNames from 'classnames'

export default class app extends PureComponent {

    constructor(props){

        super(props)

        this.state = {

            isActive: true,

            errClass: 'error'

        }

    }

    render() {

        const {isActive,errClass} = this.state;

        let isBar = true;

        let warnClass = "warn";

        return (

            <div>

                <h2 className={"foo bar active title"}>我是标题</h2>

                <h2 className={"title " + (isActive ? "active" : "") }>我是标题2</h2>

                <h2 className={["title",isActive ? "active" : ""].join(" ")}>我是标题3</h2>

            

                {/* Classnames 添加class */}

                <h2 className={classNames("foo","active")}>我是标题4</h2>

                <h2 className={classNames({"active":isActive,"isBar":isBar})}>我是标题5</h2>

                <h2 className={classNames({"active":isActive,"isBar":isBar},"title")}>我是标题6</h2>

                <h2 className={classNames("foo",errClass,warnClass)}>我是标题7</h2>

                <h2 className={classNames(["foo","active"])}>我是标题8</h2>

                <h2 className={classNames(["foo"],{"active":isActive,"isBar":isBar})}>我是标题9</h2>

            </div>

        )

    }

}