react动态绑定className

使用classNames库

1. 摘自组件库react-weui 文件 /src/utils/classnames.js
2. classnames 库

/*!
  Copyright (c) 2017 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames

  with fix with es6 export default
*/

var hasOwn = {}.hasOwnProperty;

function classNames () {
	var classes = [];

	for (var i = 0; i < arguments.length; i++) {
		var arg = arguments[i];
		if (!arg) continue;

		var argType = typeof arg;

		if (argType === 'string' || argType === 'number') {
			classes.push(arg);
		} else if (Array.isArray(arg)) {
			classes.push(classNames.apply(null, arg));
		} else if (argType === 'object') {
			for (var key in arg) {
				if (hasOwn.call(arg, key) && arg[key]) {
					classes.push(key);
				}
			}
		}
	}

	return classes.join(' ');
}

export default classNames;

使用方式：

const className = classNames({
    'weui-dialog__btn': true,
    'weui-dialog__btn_default': type === 'default',
    'weui-dialog__btn_primary': type === 'primary'
});
const className = classNames('weui-dialog__btn','weui-dialog__btn_default')
const className = classNames(['weui-dialog__btn','weui-dialog__btn_default'])

ReactDOM.render(
  <h1 className={className}>Hello, world!</h1>,
  document.getElementById('root')
);