javascript - React/Javascript - 需要一个更好的进度条逻辑解决方案

Question

我的项目中有一个进度条，它接受一系列的值，我已经根据它添加了验证。它正在工作，但似乎有很多重复。需要更好的解决方案。这是代码:-

const ProgressBar = ({ price }) => {
  return (
    <div className="bar">
      {price === 1 && (
        <React.Fragment>
          <span className="percentage one" />
          <span className="percentage two" />
        </React.Fragment>
      )}
      {price === 2 && (
        <React.Fragment>
          <span className="percentage one" />
          <span className="percentage two" />
          <span className="percentage three" />
        </React.Fragment>
      )}
      {price === 3 && (
        <React.Fragment>
          <span className="percentage one" />
          <span className="percentage two" />
          <span className="percentage three" />
          <span className="percentage four" />
        </React.Fragment>
      )}
    </div>
  );
};

所以上面的价格可以是 1、2、3 或 4，我根据数字进行检查，然后渲染一、二、三、四类的跨度范围。如果一个数字是 2 那么它将渲染 2 个 span 与 class 1 和 2。有人可以提出更好的解决方案吗？

Answer 1

这个怎么样:

const ProgressBar = ({ price }) => {
  return (
    <div className='bar'>
      {price >= 0 && <span className="percentage one" />}
      {price >= 1 && <span className="percentage two" />}
      {price >= 2 && <span className="percentage three" />}
      {price >= 3 && <span className="percentage four" />}
    </div>
  );
};