reactClass

npm install reactclass --save

Use with node.js or webpack:

在nodejs和webpack中使用这个组件:

var reactClass = require('reactClass');
 
//use string
reactClass('class1', 'class2'); // => 'class1 class2'
 
//use array
reactClass(['class1', 'class2']);  // => 'class1 class2'
 
//use object
reactClass({
    'class1': true,
    'class2': true,
    'class3': false
}); // => 'class1 class2'
 
//use var
let classNames1 = 'class1';
let classNames2 = 'class2';
let classNames3 = 'class3';
 
reactClass([{
    'classname': classNames1,
    'display': true
}, {
    'classname': classNames2,
    'display': false
}, {
    'classname': classNames3,
    'display': true
}]) // => 'class1 class3'
 

Usage with React.js / 在React中使用该组件

You can use this way react to the <button> settings in multiple classnames

你可以在react中使用这样的方式给button设置多个样式

var Button = React.createClass({
  // ...
  render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

You can use an array object to set multiple classnames

你可以使用一个数组对象来设置多个class:

var reactClass = require('reactClass');
 
var Button = React.createClass({
  // ...
  render () {
    var btnClass = reactClass([{
        'classname': 'btn',
        'display': true
      },
      {
        'classname': 'btn-pressed',
        'display': this.state.isPressed,
      },
      {
        'classname': 'btn-over',
        'display': !this.state.isPressed && this.state.isHovered
      }]
    );
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

License

MIT. Copyright (c) 2016