Добавить динамическое имя класса

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 для div. Все классы я получаю large_prod_modal, large_prod_class и hidden

Как получить large_prod_modal_9 класс для div?

Answer 1

Вы можете использовать это:

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

Вы можете увидеть this documentation о добавлении динамических свойств объектов во время выполнения (динамически):

Эта запись также очень полезно, когда имена свойств для быть динамически определено (когда имя свойства не определено до времени исполнения).

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

Аддон 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' 
}); 

Вы можете смешивать строки и объекты по своему желанию. Вы не получаете эту гибкость с помощью addon classSet.