web-dev-qa-db-ja.com

ReactJSスタイルを動的に変更する方法は？

Twitter bootstrap WebアプリでReactJSを実行しようとしていました。スタイルの使用に問題があります。

この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>
  );
 }
});

インラインスタイル に関するドキュメントを読みましたが、例は非常に軽いです。

ご協力いただきありがとうございます。

編集：

以下を使用して：

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

それはうまく機能しますが、pxではなく％として強制する方法を疑問に思っていました。

javascriptcssreactjs
41
Seif Eddine Mouelhi

OK、ついに解決策を見つけました。

おそらくReactJSと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}}/>
      ...

レンダリング関数の外部でパーセント変数を作成しました。

55
Seif Eddine Mouelhi