classnames库

最新推荐文章于 2024-06-23 10:00:59 发布

郭大钰

最新推荐文章于 2024-06-23 10:00:59 发布

阅读量178

点赞数

分类专栏： react 文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/m0_46684624/article/details/128830500

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

react中添加class
使用第三方库：classnames
安装classnames

yarn add classnames

import React, { PureComponent } from 'react'

import classNames from 'classnames'

export default class App extends PureComponent {
  constructor(props){
    super(props);

    this.state = {
      isActive:true
    }
  }

  render() {
    const {isActive} = this.state;
    const isBar = false
    const errClass = 'error'

    return (
      <div>
        {/* 原生react中添加class方法 */}
        <h2 className={'foo bar active title'}>aaa</h2>
        <h2 className={'title'+(isActive?' active':'')}>222</h2>
        <h2 className={['title',(isActive ?'active':'')].join(' ')}>333</h2>

        {/* classnames库添加class */}
        <h2 className={classNames('foo','bar','active')}>titleone</h2>
        <h2 className={classNames({'active':isActive,'bar':isBar},'title')}>title2</h2>
        <h2 className={classNames('foo',errClass,{'active':isActive})}>title3</h2>
        <h2 className={classNames(['active',{'bar':isBar}])}>title4</h2>
      </div>
    )
  }
}