反应小时到天的时间表

Question

我目前仍在学习 react js，下面的代码会列出一天中的小时数，稍后我可能会用它做一些更好的事情； 但是我正在努力让它超过 1 天并在午夜重置到 00:00 并在我得到 00:00 -> 47:00 的那一刻正确继续

这里有没有人了解最好的方法，以便采用以下方法并使其基本上创建 00 到 00 并根据给定的天数重复？

代码：

function TimeLine() {
  const hoursInDay = 24;
  const daysToTest = 2;
  
  const hours = new Array(hoursInDay * daysToTest)
    .fill(null)
    .map((item, index) => index);

  
  const timeLine = hours.map((item) => {
    return (
      <ul className="timeline__item">
        <li key={item}>{item}:00</li>
      </ul>
    );
  });

  return <div>{timeLine}</div>;
}

Answer 1

使用模数（余数）运算符在 24 处“包装”小时数（ item % 24 ）：

  
 
  
  
 
   
 
    
function TimeLine() {
  const hoursInDay = 24;
  const daysToTest = 2;
  
  const hours = new Array(hoursInDay * daysToTest)
    .fill(null)
    .map((item, index) => index);
  
  const timeLine = hours.map((item) => {
    return (
        <li key={item}>{item % 24}:00</li>
    );
  });

  return <ul>{timeLine}</ul>;
}

ReactDOM.render(<TimeLine />, document.body);
 
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
 
   
 
  

Answer 2

或者您可以将Array.from与一个简单的条件一起使用，这样您就可以避免循环之一。

 const timeLine = () => { const hours = 24; const days = 2; const res = Array.from({ length: hours * days }, (_, k) => k < hours ? k : k - (Math.floor(k / hours) * hours)); return res; }; console.log(timeLine());