添加动态类名

Question

在react.js 中，我需要将动态类名添加到div。
使用react-addons，我尝试了以下方式但徒劳无功：

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>);
    }
});

而Overlay组件的使用方式如下：

<Overlay prod_id="9" />

道具（即：prod_id）的值是随机的。我没有得到div 的large_prod_modal_9 类。我得到的所有课程都是large_prod_modal,large_prod_class 和hidden

如何获得div 的large_prod_modal_9 类？

Answer 1

classSet 插件自 0.13 起已弃用。官方推荐使用JedWatson/classnames。

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'
});

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

Answer 2

示例解决方案是：

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

您无法在 JSON 对象中动态生成密钥，这就是为什么您会得到“large_prod_class”并且它是正确的

Answer 3

你可以用这个：

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

您可以查看this documentation 关于在运行时（动态地）向对象添加动态属性：

当要动态确定属性名称时（当属性名称直到运行时才确定时），此表示法也非常有用。