React中如何設(shè)置多個(gè)className

更新時(shí)間：2023年01月17日 09:06:12 作者：sky_Wolf丶

這篇文章主要介紹了React中如何設(shè)置多個(gè)className問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React設(shè)置多個(gè)className

在一個(gè)元素上設(shè)置樣式，有一個(gè)固定的樣式，然后還有一個(gè)使用三元運(yùn)算符根據(jù)條件添加的樣式。

比如說(shuō)有一個(gè)固定樣式"title":

<div className="title">標(biāo)題</div>

然后還要一個(gè)點(diǎn)擊高亮的樣式:

<div className={index === this.state.active ? "active" : null}>標(biāo)題</div>

不能這樣寫：

<div className="title" className={index === this.state.active ? "active" : null}>標(biāo)題</div>

方法一：ES6 模板字符串 ``

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

方法二：join("")

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

方法三：classnames(需要下載classnames)

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>;
? }
});

個(gè)人喜好第二種，一方面代碼量少，另一方面方便對(duì) className數(shù)組的增加與刪除。

React className的寫法

本文中展示的，都是多className情況下的寫法，提供的寫法都是筆者個(gè)人的一些經(jīng)驗(yàn)總結(jié)，并不一定是最標(biāo)準(zhǔn)的寫法，但是符合高內(nèi)聚，低耦合的工程思想。

（ps：csdn里貌似 jsx 的代碼高亮有些問題，我就用模板字符串包住了）

模板字符串的寫法

//寫法一
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 >`
        )
    }
}

寫法一：模板字符串非折疊的寫法，不僅代碼看起來(lái)非常的惡心，而且萬(wàn)一少一個(gè)空格隔開，是沒有錯(cuò)誤提示的（這點(diǎn)是最致命的），同時(shí)最后render出的html結(jié)構(gòu)中還會(huì)帶來(lái)無(wú)意義的空格（見下圖）。

寫法二：模板字符串折疊的寫法，雖然代碼看起來(lái)清楚了些也不會(huì)少敲空格，但是最后render出的html結(jié)構(gòu)中不僅有空格，還有換行（見下圖）顯然是顧此失彼。

formatClass的方法

顯然模板字符串帶來(lái)了很多的麻煩。

既然className本質(zhì)上就是要得到一個(gè)字符串，那么我們就自己寫個(gè)方法來(lái)得到目標(biāo)字符串。

//寫法三
export default class A extends Component {
    state ={
        work: true,
        sabbatical: false,
    }
    render(){
        //可以將所有的className屬性都塞入下面的對(duì)象中
        let _class = formatReactClass({
          item: [
            'calend-item',
            work ? null : "off-day",
            sabbatical ? "sabbatical" : null,
          ]
        })
 
        return (
            `<div className={_class.item} >
                {/*...............*/}
            </div >`
        )
    }
}
 
//下面?zhèn)z函數(shù)可以放到自己項(xiàng)目里的工具函數(shù)模塊中
 
/**
 * @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對(duì)象
 * @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;
}

寫法三：我們將所有的className屬性的值都塞入一個(gè)對(duì)象中（高內(nèi)聚思想的體現(xiàn)），同時(shí)使用formatReactClass工具函數(shù)格式化我們的_class對(duì)象。使我們的無(wú)論是代碼中，還是最后render出的html結(jié)構(gòu)中的class屬性都十分的規(guī)整。

小結(jié)：除了上述寫法、還可以引入如 classnames 等三方的庫(kù)來(lái)解決問題。筆者的寫法不一定是最好的，但無(wú)論是從開發(fā)代碼的規(guī)整度，還是從二次翻閱代碼的舒適度、都是目前個(gè)人覺得不錯(cuò)的一個(gè)寫法。