美文网首页
React设置多个classNames

React设置多个classNames

作者: 一懒众衫小小小小 | 来源:发表于2020-04-17 18:25 被阅读0次

    方法一:ES6模版字符串

    className={`title ${index === this.state.active ? 'active' : ''}`}
    

    方法二:join("")

    className={["title", index === this.state.active ? "active":null].join(' ')}
    

    方法三:classnames(需要下载classnames)

    var classNames = require('classnames');
     
    var Button = React.createClass({
      // ...
      render () {
        var btnClass = classNames({
          btn: true,
          'btn-pressed': this.state.isPressed,
          'btn-over': !this.state.isPressed && this.state.isHovered
        });
        return <button className={btnClass}>{this.props.label}</button>;
      }
    });
    

    相关文章

      网友评论

          本文标题:React设置多个classNames

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