别注重包名,跟内涵没有半点关系!!!
内涵是字符串拼接,但是用途非常广泛!
解决React
中css
全局污染的问题。调用jollychic()
返回的仍旧是一个函数,但是jollychic
把传入的参数缓存起来,用于拼接后续传入的字符串。
import jollychic from 'jollychic';
const prefix = 'className前缀';
const symbol = '拼接className的连接符,默认为空';
const jc = jollychic(prefix, symbol);
const suffix = 'className后缀';
const className = jc(suffix);
const jc = jollychic('container', '-');
const aa = jc('title'); // container-title
const bb = jc('content'); // container-content
const cc = jc('content-left'); // container-content-left
const dd = jc('content', 'left'); // container-content-left
const ee = jc('content', 'left', 'first'); // container-content-left-first
const jc = jollychic('container');
const aa = jc('content'); // containercontent
const bb = jc('-content'); // container-content
const cc = jc('-content-left'); // container-content-left
const dd = jc('-content', '-left'); // container-content-left
const ee = jc('-content', '-left-first'); // container-content-left-first
import React, {Component} from 'react';
import jollychic from 'jollychic';
class Home extends Component {
render() {
const jc = jollychic('home-container', '-')
return (
<div className={jc('content')}>
<div className={jc('content-title')}>title</div>
<div className={jc('content-content')}>content</div>
</div>
);
}
}
export default Home;
import React, {Component} from 'react';
import jollychic from 'jollychic';
import classnames from 'classnames';
class Home extends Component {
render() {
const jc = jollychic('home-container', '-')
const contentCls = classnames(
jc('content'),
'animate': true,
'handsome': true,
'money': false
)
return (
<div className={contentCls}>
<div className={jc('content-title')}>title</div>
<div className={jc('content-content')}>content</div>
</div>
);
}
}
export default Home;