React中如何设置多个className
sky_Wolf丶 人气:0React设置多个className
在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式。
比如说有一个固定样式"title":
<div className="title">标题</div>
然后还要一个点击高亮的样式:
<div className={index === this.state.active ? "active" : null}>标题</div>
不能这样写:
<div className="title" className={index === this.state.active ? "active" : null}>标题</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>; } });
个人喜好 第二种,一方面代码量少,另一方面方便对 className数组的增加与删除。
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 ( `<div className={` '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 等三方的库来解决问题。笔者的写法不一定是最好的,但无论是从开发代码的规整度,还是从二次翻阅代码的舒适度、都是目前个人觉得不错的一个写法。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容