Question

假设我将一些CSS类定义为：

.fg-dark-color {color: #444;}
.bg-dark-color {background-color: #444;}
.fg-light-color {color: #fff;}
.bg-light-color {background-color: #fff;}

我想将这些类聚合成如下组：

.btn {
   .fg-dark-color;
   .bg-light-color;
}

.btn-reversed {
   .fg-light-color;
   .bg-dark-color;
}

当我有反应组件时：

var Btn = React.createClass({
  render: function () {
    return (
       <button className='btn'>My button</button>
    );
  }
});

我希望课程名称btn自动扩展为fg-dark-color bg-light-color

是否有任何reactjs工具支持这样做？或者，如果没有现成的工具，我怎么能以通用方式做出反应呢？

Answer 1

尝试使用Classnames，React的模块officially supported。

根据你所写的内容，你可以写一下：

var btn = [
   fg-dark-color,
   bg-light-color
]

然后：

return (
   <button className={classNames(btn)}>My button</button>
);

Answer 2

要获得此类效果，您可以将类编写为Javascript对象并与实用程序函数结合使用：

m: function() {
    var result = {};
    for (var i = 0; i < arguments.length; i++) {
        if (arguments[i]) {
            for (k in arguments[i]) {
                result[k] = arguments[i][k];
            }
        }
    }
    return result;  
}

有关React中CSS的更多指示，我建议Christopher Chedeau在这个主题上有很棒的slide deck。

Answer 3

您可以使用classNames创建所需的CSS图纸，然后您可以将它们应用为

更好的是classNames允许你使用条件。

let setActive = (isActive) => {
    return classNames({
        active: isActive
    });
};

然后您可以将其用作：

<Element className={setActive(true)} />

Answer 4

好的，我已经提出了自己的解决方案：https://www.npmjs.com/package/expjs

用法：

var ExpJs = require('expjs');
// the rules could be managed centrally in another js file
// in which case it would be: var rules = require('css_rules');
var rules = {
    'btn': 'fg-color-dark bg-color-light',
    'btn-reverse': 'fg-color-light bg-color-dark',
    ... 
}
var exp = ExpJs.init(rules);

var Btn = React.createClass({
  render: function () {
    return (
       <button className={exp('btn-reverse btn-my-button')}>My button</button>
    );
  }
});

上面的代码将输出以下html：

<button class='fg-color-light bg-color-dark btn-my-button'>My button</button>

ReactJS：聚合CSS类

4 个答案: