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 等三方的库来解决问题。笔者的写法不一定是最好的,但无论是从开发代码的规整度,还是从二次翻阅代码的舒适度、都是目前个人觉得不错的一个写法。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值