添加动态类名称

Question

在react.js中,我需要为a添加一个动态类名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>);
    }
});

和Overlay组件在使用方式如下:

<Overlay prod_id="9" />

然而,prop(即:) prod_id值是随机的.我没有large_prod_modal_9上课div.我得到的所有课程都是large_prod_modal,large_prod_class和hidden

如何large_prod_modal_9上课div？

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

    }
});

如果所有类名都是true,则可以将它们作为字符串传递.

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

您可以根据需要混合字符串和对象.你没有使用addon classSet获得这种灵活性.

Answer 2

你可以使用这个：

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

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

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