Я пытался запустить ReactJS внутри своего веб-приложения twitter bootstrap. У меня есть некоторые проблемы с использованием стилей.
Имея этот div:
...
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 80%;"/>
...
Я пишу динамический индикатор прогресса и хотел бы сделать это на 80% (смотрите ** под ним). Итак, это моя запись кода в JSX:
var Task = React.createClass({
render: function() {
return (
<li>
<a href="#">
<span className="header">
<span className="title">{this.props.type}</span>
<span className="percent">{this.props.children}%</span>
</span>
<div className="taskProgress progressSlim progressBlue" >
<div className="ui-progressbar-value ui-widget-header ui-corner-left"
**style="width"+{this.props.value} +"%;" />**
</div>
</a>
</li>
);
}
});
Я прочитал некоторую документацию о inline sytles, но пример очень прост.
Спасибо за вашу помощь.
Изменить:
Используя:
style={{width : this.props.children}}
он отлично работает, но просто задавался вопросом, как заставить его как% вместо px.