javascript - 添加动态类名

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" />

Prop (即:prod_id)的值是随机的。我没有得到 div 的 large_prod_modal_9 类。我得到的所有类都是 large_prod_modal、large_prod_class 和 hidden

如何为 div 获取 large_prod_modal_9 类？

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

    }
});

如果所有类名始终为真，您可以将它们作为字符串传递。

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

您可以根据需要混合字符串和对象。插件 classSet 无法提供这种灵 active 。