Question

我想要一个进度条，这是一个多栏。看起来像这样：

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

它有三个独特的部分，RED-GREEN-RED：

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

这是实时的，价值来自远程json api，如果值在绿色区域，一切都很好，否则同事要求采取的行动（如果在同一区域或其上方）。

到目前为止，我实现了html + css，在Firefox和Chrome中运行良好。这是关于jsfiddle的演示项目：

现在我需要“重新获得”代码，才能活着：）

问题是，我无法内联以下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%
    );
}

重新调整的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>
  );
};

我可以设置微弱的背景（因此min和max始终可见），但不是实际的进度条。

有没有人有任何想法，如何使用React制作动态css选择器？

ps：仅需要Chrome和Firefox支持，因为它最终将成为控制室中的电视（Kiosk模式）。所以根本不需要IE支持。 html5 <progress>元素将是正确的解决方案imho。

更新：这是一个演示反应项目： https://jsfiddle.net/ave0x0nb/3/

进度条为单色（红色0-30％），有两种颜色（红色0-30％，绿色30-70％）或三色（红色0-30％，绿色30-70％，红色） 70-100％）取决于实际值。因此，如果该值为50％，则它是两种颜色（0-30％红色和30-50％绿色）。

现在的问题（以及问题），它始终是tricolored（上面的反应演示项目），并且不尊重后台进度条的限制。请参阅20％，50％，80％的jsfiddle演示项目以供参考。

Update2：我添加了动画作为参考。

Answer 1

function updateValue(){
	const progress = document.querySelector('progress');  
  progress.value = Math.round(Math.random()*100) + 1;
  console.log(progress.value);
}

const interval = setInterval(updateValue, 500);

setTimeout(function () {
	clearInterval(interval);
}, 4000);

.wrapper-progressbar {
  flex: 1;
}

progress {
  width: 100%;
  background-image:
    linear-gradient(
      90deg,
      rgba(255,0,0,0.1),
      rgba(255,0,0,0.1) 30%,
      rgba(0,255,0,0.1) 30%,
      rgba(0,255,0,0.1) 70%, 
      rgba(255,0,0,0.1) 70%);
  border: 0;
  height: 2em;
  border-radius: 9px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-bar {
  width: 100%;
  background: transparent;
  background-image:
    -webkit-linear-gradient(
      left,
      rgba(255,0,0,0.1),
      rgba(255,0,0,0.1) 30%,
      rgba(0,255,0,0.1) 30%,
      rgba(0,255,0,0.1) 70%,
      rgba(255,0,0,0.1) 70%);
  border: 0;
  height: 2em;
  border-radius: 9px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
}

progress[value] {
  background-color: transparent;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
  position: relative;
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Get rid of default border in Firefox. */
  /*border: none;*/
}

progress[value]::-moz-progress-bar { /* Firefox */
  border-radius: 2px;
  background-size: 65px, 100%, 100%;
  background-color: transparent;
  background-image:
    -moz-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -moz-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(
      left,
      rgba(255,0,0,0.8),
      rgba(255,0,0,0.8) 100%,
      rgba(0,255,0,0.8) 100%,
      rgba(0,255,0,0.8) 100%,
      rgba(255,0,0,0.8) 100%
    );
}

progress[value]::-webkit-progress-value { /* Chrome */
  border-radius: 2px;
  background-size: 65px, 100%, 100%;
  background-color: transparent;
  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) 100%,
      rgba(0,255,0,0.8) 100%,
      rgba(0,255,0,0.8) 100%,
      rgba(255,0,0,0.8) 100%
    );
}

    <div className="wrapper-progressbar">
      <progress style={styleProgress} max="100" value="90"></progress>
    </div>

Answer 2

使用classnames 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
      }),

在渲染中：

render(){
   return (
       <div classNames={progressBarClass}>{'progress-bar'}</div>   
   );
}

在css文件中：

.green {
  //...green styles
}

.yellow {
  //...yellow styles
}


.red {
  //...red styles
}

我还没有编写确切的代码，但您可以有条件地应用这样的类。而不是使用inline-css，因为它使你的代码不可读，我个人不喜欢内联样式。

反应

2 个答案: