Javascript 带有react的进度[价值]样式

我想要一个progressbar，它是一个multibar。看起来像这样：

[----------][----50%    ][        ]
[---20%    ][           ][        ]
[----------][-----------][---80%  ]

它有三个独特的部分，红-绿-红：

[ RED RED  ][GREEN GREEN][ RED RED]

它是实时的，值来自远程json api， 如果该值位于绿色区域，则一切正常，否则 要求同事采取的行动（如果在所需区域下方或上方）

到目前为止，我实现了html+css，在Firefox和Chrome中运行良好。 以下是JSFIDLE上的演示项目：

• 20%－
• 50%-
• 80%-

现在，我需要对代码进行“反应”，以使其处于活动状态：）

问题是，我无法内联设置以下CSS规则的样式：

    progress[value]::-webkit-progress-value { /* Chrome */
  background-image:
    -webkit-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -webkit-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.25)
    ),
    -webkit-linear-gradient(
      left,
      rgba(255,0,0,0.8),
      rgba(255,0,0,0.8) 37.5%,
      rgba(0,255,0,0.8) 37.5%,
      rgba(0,255,0,0.8) 87.5%,
      rgba(255,0,0,0.8) 87.5%
    );
}

reactified Progressbar.js相当简单：

const Progressbar = ({percent, min, max}) => {

  let styleProgress = {  backgroundImage:
    `linear-gradient(
      90deg,
      rgba(255,0,0,0.1),
      rgba(255,0,0,0.1) ${min}%,
      rgba(0,255,0,0.1) ${min}%,
      rgba(0,255,0,0.1) ${max}%,
      rgba(255,0,0,0.1) ${max}%)`
  };

  return(
      <div className="wrapper-progressbar">
        <progress style={styleProgress} max="100" value={percent}>
        </progress>
      </div>
  );
};

const Progressbar=（{percent，min，max}）=>{
让styleProgress={backgroundImage:
`线性梯度(
90度，
rgba（255,0,0,0.1），
rgba（255,0,0,0.1）${min}%，
rgba（0255,0,0.1）${min}%，
rgba（0255,0,0.1）${max}%，
rgba（255,0,0,0.1）${max}%）`
};
返回(
);
};

我可以设置微弱的回退（因此最小值和最大值始终可见），但不能设置实际的进度条

有人知道如何用React制作动态css选择器吗

ps：只需要Chrome和Firefox支持，因为它最终会成为控制室中的电视（信息亭模式）。 所以根本不需要IE支持。 html5

元素将是imho的正确解决方案

更新：这是一个演示react项目：

progressbar是单色（红色0-30%），有两种颜色（红色0-30%，绿色30-70%）或三色（红色0-30%，绿色30-70%，红色70-100%），具体取决于实际值。 因此，如果值为50%，则为两种颜色（0-30%红色和30-50%绿色）

现在的问题是，它总是三色的（上面的react演示项目），并且不尊重背景progressbar的限制。 参考20%、50%、80%的JSFIDLE演示项目

更新2：我添加了一个动画作为参考。

函数updateValue（）{
const progress=document.querySelector（'progress'）；
progress.value=Math.round（Math.random（）*100）+1；
console.log（progress.value）；
}
const interval=setInterval（updateValue，500）；
setTimeout（函数（）{
间隔时间；
}, 4000);
.wrapper进度条{
弹性：1；
}
进展{
宽度：100%；
背景图像：
线性梯度(
90度，
rgba（255,0,0,0.1），
rgba（255,0,0,0.1）30%，
rgba（0255,0,0.1）30%，
rgba（0255,0,0.1）70%，
rgba（255,0,0,0.1）70%；
边界：0；
高度：2米；
边界半径：9px；
盒影：0.2×3×rgba（0,0,0,0.25）插页；
}
进度[值]：-webkit进度条{
宽度：100%；
背景：透明；
背景图像：
-线性梯度(
左边
rgba（255,0,0,0.1），
rgba（255,0,0,0.1）30%，
rgba（0255,0,0.1）30%，
rgba（0255,0,0.1）70%，
rgba（255,0,0,0.1）70%；
边界：0；
高度：2米；
边界半径：9px；
盒影：0.2×3×rgba（0,0,0,0.25）插页；
}
进展[价值]{
背景色：透明；
边界半径：5px；
盒影：0.2×3×rgba（0,0,0,0.25）插页；
位置：相对位置；
/*重置默认外观*/
-webkit外观：无；
-moz外观：无；
外观：无；
/*去掉Firefox中的默认边框*/
/*边界：无*/
}
进度[值]：-moz进度条{/*Firefox*/
边界半径：2px；
背景尺寸：65px，100%，100%；
背景色：透明；
背景图像：
-莫兹线性梯度(
135度，
透明33%，
rgba（0,0,0,0.1）33%，
rgba（0,0,0,0.1）66%，
透明66%
),
-莫兹线性梯度(
顶部
rgba（255，255，255，0.25），
rgba（0,0,0,0.25）
),
-莫兹线性梯度(
左边
rgba（255,0,0,0.8），
rgba（255,0,0,0.8）100%，
rgba（0255,0,0.8）100%，
rgba（0255,0,0.8）100%，
rgba（255,0,0,0.8）100%
);
}
进度[值]：-webkit进度值{/*Chrome*/
边界半径：2px；
背景尺寸：65px，100%，100%；
背景色：透明；
背景图像：
-线性梯度(
135度，
透明33%，
rgba（0,0,0,0.1）33%，
rgba（0,0,0,0.1）66%，
透明66%
),
-线性梯度(
顶部
rgba（255，255，255，0.25），
rgba（0,0,0,0.25）
),
-线性梯度(
左边
rgba（255,0,0,0.8），
rgba（255,0,0,0.8）100%，
rgba（0255,0,0.8）100%，
rgba（0255,0,0.8）100%，
rgba（255,0,0,0.8）100%
);
}

使用npm软件包。您可以在组件中发送进度（例如20%、50%、80%），并相应地在组件中应用类名，如下所示：

progressBarClass = classNames('defaultClass', {
        'green': props.progress < PROGRESS_VALUE.green,
        'yellow': PROGRESS_VALUE.green < props.progress < PROGRESS_VALUE.yellow,
        'red': props.progress > PROGRESS_VALUE.red
      }),

我还没有编写确切的代码，但是您可以有条件地应用这样的类。不要使用内联css，因为它会使代码不可读，我个人不喜欢内联样式。
您是否尝试过在className属性中使用函数？或者，在其中一个生命周期函数中，为函数的响应分配属性。例如，
componentWillUpdate（）{this.setState（{color:this.getColor（[nextrops]）}
progressbar组件通过props接收值。它工作正常（在ComponentDidMount中触发，并更新react-redux状态）。此外，还有一个数字显示（用于实际值），工作正常。（一个简单的react组件，带有一个巨大的
元素。在我看来，value属性应该只是一个props或state值。例如value={this.props.value}你没有抓住要点。progressbar是三色的。你的全部是红色。看看80%的情况，例如：你的progressbar是绿色、黄色或红色。虽然我想要一个有三种颜色（高于70%）、两种颜色（高于30%）和单色低于30%的progressbar。我将制作一个动画gif
render(){
   return (
       <div classNames={progressBarClass}>{'progress-bar'}</div>   
   );
}

.green {
  //...green styles
}

.yellow {
  //...yellow styles
}


.red {
  //...red styles
}