如何动态更改 ReactJS 样式？

Posted 2023-02-21

【中文标题】如何动态更改 ReactJS 样式？

【英文标题】：How to change ReactJS styles dynamically?

【发布时间】：2014-04-13 01:39:24

【问题描述】：

我试图在我的 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>
  );
 
);

我阅读了一些关于inline sytles 的文档，但是这个例子很简单。

感谢您的帮助。

编辑：

通过使用：

    style=width : this.props.children

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

【参考方案1】：

好的，终于找到解决方案了。

可能是由于缺乏 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/>
      ...

我在渲染函数外部创建了百分比变量。

【讨论】：

你也可以写style=width: this.props.value + "%"这样的东西。

或者更好，使用模板字符串：style=width: `$this.props.value%`