react 开发技巧

多个 className 的添加

• 方法一

<div className={ isCollect?'btn-collect collected':'btn-collect'}></div>

• 方法二

const classNames = require('classnames')
render () {
  const { userinfo, isLogin, isVip } = this.state
  const btnClass = [
   'btn',
   isLogin?'btn-is-login':'',
   (isLogin && isVip)?'btn-is-vip':''
  ]
    return <button className={btnClass.join(' ')}>{ userinfo.username }</button>
}  

• 方法三 需要下载 classnames

yarn add classnames

const classNames = require('classnames')
render () {
  const { userinfo, isLogin, isVip } = this.state
    const btnClass = classNames({
      btn: true,
      'btn-is-login': isLogin,
      'btn-is-vip': isLogin && isVip
    });
    return <button className={ btnClass }>{ userinfo.username }</button>
}