React className的写法

本文中展示的，都是多className情况下的写法，提供的写法都是笔者个人的一些经验总结，并不一定是最标准的写法，但是符合高内聚，低耦合的工程思想。

（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 (`<divclassName={`'calend-item'${work ? ''  : "off-day"}${sabbatical ? "sabbatical" : ''}`}>{/*...............*/}</div >`)}
}

写法一：模板字符串非折叠的写法，不仅代码看起来非常的恶心，而且万一少一个空格隔开，是没有错误提示的（这点是最致命的），同时最后render出的html结构中还会带来无意义的空格（见下图）。

写法二：模板字符串折叠的写法，虽然代码看起来清楚了些也不会少敲空格，但是最后render出的html结构中不仅有空格，还有换行（见下图）显然是顾此失彼。

二、formatClass的方法

显然模板字符串带来了很多的麻烦。既然className本质上就是要得到一个字符串，那么我们就自己写个方法来得到目标字符串。

//写法三
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;
}

写法三：我们将所有的className属性的值都塞入一个对象中（高内聚思想的体现），同时使用formatReactClass工具函数格式化我们的_class对象。使我们的无论是代码中，还是最后render出的html结构中的class属性都十分的规整。

三、总结

除了上述写法、还可以引入如 classnames 等三方的库来解决问题。笔者的写法不一定是最好的，但无论是从开发代码的规整度，还是从二次翻阅代码的舒适度、都是目前个人觉得不错的一个写法。