React中如何设置多个className

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

<div className={index === this.state.active ? "active" : null}>标题</div>

<div className="title" className={index === this.state.active ? "active" : null}>标题</div>

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

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

const classNames = require('classnames');
 
const Button = React.createClass({
  // ...
  render () {
    const 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>;
  }
});

//写法一
export default class A extends Component {
    state ={
        work: true,
        sabbatical: false,
    }
    render(){
        return (
            `<div 
                className={`calend-item ${work ? '' : "off-day"} ${sabbatical ? "sabbatical" : ''}`}
            >
                {/*...............*/}
            </div >`
        )
    }
}
 
//写法二
export default class B extends Component {
    state ={
        work: true,
        sabbatical: false,
    }
    render(){
        return (
            `<div
                className={`
                    'calend-item'
                    ${work ? ''  : "off-day"}
                    ${sabbatical ? "sabbatical" : ''}
                `}
            >
                {/*...............*/}
            </div >`
        )
    }
}
 

//写法三
export default class A extends Component {
    state ={
        work: true,
        sabbatical: false,
    }
    render(){
        //可以将所有的className属性都塞入下面的对象中
        let _class = formatReactClass({
          item: [
            'calend-item',
            work ? null : "off-day",
            sabbatical ? "sabbatical" : null,
          ]
        })
 
        return (
            `<div className={_class.item} >
                {/*...............*/}
            </div >`
        )
    }
}
 
//下面俩函数可以放到自己项目里的工具函数模块中
 
/**
 * @description: 格式化组件class
 * @param {Object} classObj
 * @return {Object}
 */
function formatReactClass(classObj) {
  return mapObj(classObj, i =>
    Array.isArray(i) ? i.filter(i => i && i !== '').join(' ') : i
  );
}
 
/**
 * @description: map对象
 * @param {Object} Obj
 * @param {Function} callback should be returnable
 * @return {Object}
 */
function mapObj(Obj, callback) {
  let res = {};
  Object.keys(Obj).forEach(i => (res[i] = callback(Obj[i])));
  return res;
}