如何动态改变ReactJS样式? [英] How to change ReactJS styles dynamically?

问题描述

我试图在我的Twitter引导程序Web应用程序中运行ReactJS.我在使用样式时遇到一些问题.

I was trying to run ReactJS inside my twitter bootstrap web app. I have some issues using styles.

具有该div:

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

我正在编写一些动态进度条，并希望进行80％的更改(请看下面的**).这就是我用JSX编写的代码:

I'm writing some dynamic progress bar, and would like to make that 80% change (look at ** underneath). So this is my code writing in 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>
  );
 }
});

我阅读了一些有关内联样式的文档，但是该示例非常简单.

I read some documentation about the inline sytles, but the example is very light.

感谢您的帮助.

使用:

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

它工作正常，但只是想知道如何将其强制为％而不是px.

it works fine, but was just wondering how to force it as % instead of px.

推荐答案

好，终于找到了解决方案.

Ok, finally found the solution.

可能是由于缺乏对ReactJS和Web开发的经验...

Probably due to lack of experience with ReactJS and web development...

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

我在render函数的外部创建了百分比变量.

I created the percentage variable outside in the render function.

这篇关于如何动态改变ReactJS样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！