Comment changer ReactJS styles dynamiquement?

J'ai essayé de diriger ReactJS à l'intérieur de mon twitter bootstrap web app. J'ai quelques problèmes à l'aide de styles.

Avoir cette div:

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

Je suis en train d'écrire une certaine dynamique de la barre de progression, et voudrais faire que 80% de variation (regarde ** ci-dessous). C'est donc mon code écrit dans 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 inline sytles, mais l'exemple est très léger.

Merci pour votre aide.

Edit:

En utilisant:

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

il fonctionne très bien, mais me demandais juste comment le forcer en % au lieu de px.

InformationsquelleAutor Seif Eddine Mouelhi | 2014-03-10
  1. 54

    Ok, enfin trouvé la solution.

    Probablement en raison du manque d'expérience avec ReactJS et 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éé un pourcentage variable en dehors de la fonction rendu.

    • Vous pouvez également écrire quelque chose comme style={{width: this.props.value + "%"}}.
    • Ou encore mieux, avec une chaîne de modèle: style={{width: `${this.props.value}%`}}
    InformationsquelleAutor Seif Eddine Mouelhi