Javascript 添加动态类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28497338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a dynamic class name
提问by Istiaque Ahmed
In react.jsI need to add a dynamic class name to a div.
Using react-addons, I tried it the following way but in vain:
在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>);
}
});
And Overlaycomponent is used in the following way:
和Overlay组件在使用方式如下：
<Overlay prod_id="9" />
The prop (i.e: prod_id) value is random however. I do not get the large_prod_modal_9class for the div. All the classes I get are large_prod_modal,large_prod_classand hidden
然而 prop (ie: prod_id) 值是随机的。我不明白的large_prod_modal_9类的div。我得到的所有课程都是large_prod_modal,large_prod_class和hidden
How to get the large_prod_modal_9class for the div?
如何获得large_prod_modal_9课程div？
回答by Brigand
The classSet addon is deprecated as of 0.13. The offical recomendation is to use JedWatson/classnames.
从 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>);
}
});
If all of the class names are always true, you can just pass them as strings.
如果所有类名始终为真，则可以将它们作为字符串传递。
var prod_id = this.props.prop_id;
var modal_classes = cx(
'large_prod_modal_' + prod_id,
'large_prod_modal'
'hidden'
});
You can mix strings and objects as desired. You don't get this flexibility with the addon classSet.
您可以根据需要混合字符串和对象。使用插件 classSet 无法获得这种灵活性。
回答by Piotr Karbownik
example solution for this would be:
对此的示例解决方案是：
dynamicClass: function(){
return "large_prod_modal large_prod_modal_" + this.props.prod_id + " hidden"
}
render: function(){
return (<div className={this.dynamicClass()}>lorem ipsum</div>)
}
You can't generate dynamicly the key in JSON object so thats why you get 'large_prod_class' and it's correct
您无法动态生成 JSON 对象中的密钥，这就是为什么您会得到“large_prod_class”并且它是正确的
回答by nilgun
You can use this:
你可以使用这个：
var classes = {
'large_prod_modal': true,
'hidden': true
};
classes[large_prod_class] = true;
var modal_classes = cx(classes);
You can see this documentationabout adding dynamic properties to objects at run time (dynamically):
您可以查看有关在运行时（动态）向对象添加动态属性的文档：
This notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime).
当要动态确定属性名称时（直到运行时才确定属性名称时），此表示法也非常有用。
