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;