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）值是随机的。我没有获得large_prod_modal_9的{{1}}课程。我得到的所有课程都是div，large_prod_modal和large_prod_class

如何获取hidden的<{1}}课程？

Answer 1

从0.13开始，不推荐使用classSet插件。官方推荐是使用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

示例解决方案是：

 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：

当动态确定属性名称时（在运行时之前未确定属性名称），此表示法也非常有用。

添加动态类名称

3 个答案: