javascript-如何动态更改ReactJS样式?

我试图在我的Twitter引导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>
  );
 }
});

我阅读了一些有关嵌入式sytle的文档,但是该示例非常简单。

谢谢你的帮助。

编辑:

通过使用:

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

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

Seif Eddine Mouelhi asked 2020-08-11T03:16:36Z
1个解决方案
57 votes

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

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

我在render函数中创建了百分比变量。

Seif Eddine Mouelhi answered 2020-08-11T03:16:50Z
translate from https://stackoverflow.com:/questions/22291913/how-to-change-reactjs-styles-dynamically