it-swarm.com.ru

Как динамически изменять стили ReactJS?

Я пытался запустить 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.

41
Seif Eddine Mouelhi

Хорошо, наконец-то нашел решение.

Вероятно, из-за отсутствия опыта работы с ReactJS и веб-разработкой ...

    var Task = React.createClass({
    render: function() {
      var percentage = this.props.children + '%';
      ....
        <div className="ui-progressbar-value ui-widget-header ui-corner-left" style={{width : percentage}}/>
      ...

Я создал процентную переменную снаружи в функции рендеринга.

55
Seif Eddine Mouelhi