Javascript 添加动态类名

在中，我需要将动态类名添加到

div

使用，我尝试了以下方法，但没有成功：

var addons = require('react-addons');
var cx = addons.classSet;   

var Overlay = React.createClass({

    render: function() {
        var prod_id = this.props.prop_id;
        var large_prod_class = 'large_prod_modal_' + prod_id;

        var modal_classes = cx({
            'large_prod_modal': true,
            large_prod_class: true,
            'hidden': true
        });

        return (<div className={modal_classes}>lorem ipsum</div>);
    }
});

但是，道具（即：

prod_id

）值是随机的。我没有为

div

获取

large\u prod\u modal\u 9

类。我得到的所有类都是

large\u prod\u modal

，

large\u prod\u class

和

hidden

如何为

div

获取

large\u prod\u modal\u 9

类？

您可以使用以下方法：

var classes = {
    'large_prod_modal': true,
    'hidden': true
 };
 classes[large_prod_class] = true;
 var modal_classes = cx(classes);

您可以查看有关在运行时（动态）向对象添加动态属性的信息：

在动态确定属性名称时（在运行时才确定属性名称），此符号也非常有用

---

这方面的示例解决方案是：

 dynamicClass: function(){
     return "large_prod_modal large_prod_modal_" + this.props.prod_id + " hidden"
 }
 render: function(){
   return (<div className={this.dynamicClass()}>lorem ipsum</div>) 
 }

dynamicClass:function（）{
返回“大生产模式大生产模式”+this.props.prod\u id+“隐藏”
}
render:function（）{
返回（lorem ipsum）
}

---

您无法在JSON对象中动态生成键，因此您会得到“大产品类”，并且它是正确的

自0.13起，classSet插件已被弃用。官方建议使用

---

可以根据需要混合字符串和对象。插件类集没有这种灵活性。

它在哪里有文档记录？类集函数采用普通的javascript对象，因此，我认为它不需要文档记录……在我的答案中添加了文档。从技术上讲，这是一个重复

 dynamicClass: function(){
     return "large_prod_modal large_prod_modal_" + this.props.prod_id + " hidden"
 }
 render: function(){
   return (<div className={this.dynamicClass()}>lorem ipsum</div>) 
 }

var cx = require('classnames');   
var Overlay = React.createClass({

    render: function() {
        var prod_id = this.props.prop_id;
        var modal_classes  = cx('large_prod_modal_' + prod_id, {
            'large_prod_modal': true,
            'hidden': true
        });

        return (<div className={modal_classes}>lorem ipsum</div>);

    }
});

var prod_id = this.props.prop_id;
var modal_classes  = cx(
    'large_prod_modal_' + prod_id,
    'large_prod_modal'
    'hidden'
});