web-dev-qa-db-fra.com

Comment changer les styles de ReactJS de manière dynamique?

J'essayais d'exécuter ReactJS dans mon application web Twitter bootstrap). J'ai quelques problèmes à utiliser des styles.

Ayant cette div:

   ...
   <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 80%;"/>
   ...

J'écris une barre de progression dynamique et aimerais faire ce changement de 80% (regardez ** ci-dessous). Voici donc mon code écrit en 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>
  );
 }
});

J'ai lu de la documentation sur le sytles en ligne , mais l'exemple est très léger.

Merci de votre aide.

Modifier:

En utilisant:

    style={{width : this.props.children}}

cela fonctionne bien, mais je me demandais comment le forcer en tant que% au lieu de px.

javascriptcssreactjs
41
Seif Eddine Mouelhi

Ok, a finalement trouvé la solution.

Probablement en raison d'un manque d'expérience avec ReactJS et le développement Web ...

    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}}/>
      ...

J'ai créé la variable de pourcentage à l'extérieur dans la fonction de rendu.

55
Seif Eddine Mouelhi