使用jbcn模块。(本支持)

https://www.npmjs.com/package/jbcn

例子:

const classNames = jbcn({ 
    btn: { 
        alpha: true, 
        beta: true, 
        gamma: false 
    } 
});

// ==> "btn btn--alpha btn--beta"

const classNames = jbcn({
    expand: true,
    hide: false,

    btn: { 
        alpha: true, 
        beta: true, 
        gamma: false 
    } 
});

// ==> "expand btn btn--alpha btn--beta"

我将classNames绑定到导入到组件的css模块。

import classNames from 'classnames'; 
import * as styles from './[STYLES PATH];
const cx = classNames.bind(styles); 

classnames提供了以声明的方式为React元素声明className的能力。

ex:

<div classNames={cx(styles.titleText)}> Lorem </div>

<div classNames={cx('float-left')}> Lorem </div> // global css declared without css modules
<div classNames={cx( (test === 0) ?
             styles.titleText : 
             styles.subTitleText)}>  Lorem </div> // conditionally assign classes

<div classNames={cx(styles.titleText, 'float-left')}> Lorem </div> //combine multiple classes

使用字符串连接来连接CSS类是个坏主意。在很多情况下，这是非常令人困惑和压倒性的。最好添加一些简单的帮助器，将所有这些连接到一个字符串中。这里有一个例子:

import isString from 'lodash/isString';
import isObject from 'lodash/isObject';
/**
 * Helper function for conditionally creating css class strings.
 *
 * Example usage:
 *   classNames('foo', ['bar', ''], { baz: false, bob: true });
 *   => 'foo bar bob'
 *
 * @module helpers/classNames
 * @param {...(String|String[]|Object)} args
 * @returns {String}
 */
export default function classNames(...args) {
  const classes = [];
  for (const arg of args) {
    if (arg !== null && typeof arg !== 'undefined') {
        if (isString(arg)) {
          classes.push(arg);
        } else if (Array.isArray(arg)) {
          classes.push(classNames(...arg));
        } else if (isObject(arg)) {
          classes.push(classNames(...Object.keys(arg).filter(k => arg[k])));
        }
    }
  }
  return classes.join(' ');
}

(来自https://tomsoir.medium.com/react-css-classnames-concatenation-pattern-fd0fa1f31143)

这可以通过ES6模板文字实现:

<input className={`base-input-class ${class1} ${class2}`}>

(为清晰起见，经过编辑)

如果您不想导入另一个模块，此函数的工作方式与classNames模块类似。

function classNames(rules) {
    var classes = ''

    Object.keys(rules).forEach(item => {    
        if (rules[item])
            classes += (classes.length ? ' ' : '') + item
    })

    return classes
} 

你可以这样使用它:

render() {
    var classes = classNames({
        'storeInfoDiv': true,  
        'hover': this.state.isHovered == this.props.store.store_id
    })   

    return (
        <SomeComponent style={classes} />
    )
}

你可以使用react-directive，它支持所有的react元素，甚至支持dirIf, dirShow, dirFor和扩展的className等指令

你可以这样做:

import { useState } from 'react'
import directive from 'react-directive';

function Component() {
  const [isActive, setIsActive] = useState(true);
  const [isDisabled, setIsDisabled] = useState(false);

  return <directive.div className={{isActive, isDisabled}}>Contents</directive.div>;
}
// Renders <div class="isActive">Contents</div>

您甚至可以提供一些依赖项，以便在发生任何更改时重新计算类名。 我是图书馆的作者。