jollychic

className前缀拼接

别注重包名，跟内涵没有半点关系！！！

内涵是字符串拼接，但是用途非常广泛！

功能

解决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);

Example

1. 带连接符

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

2. 不带连接符

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

3. 项目实战

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;

4. 结合classnames使用

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;