Javascript 递增数字，直到使用React指定一个数字

我目前正在使用React做一个日历，我正在尝试做一个简单的函数，这样我就不必每次都写（00:00-23:00）

如何使用类名

calendar time

递增每个div，使其执行类似的操作

<div className="wrapper">
            <div className="calendar-time">
                00:00
            </div>
            <div className="calendar-time">
                01:00
            </div>
            <div className="calendar-time">
                02:00
            </div>
            <div className="calendar-time">
                03:00
            </div>
        </div>

00:00
01:00
02:00
03:00

我尝试的是：

render() {
    for (let i = 0; i < 23; i++) {
        return(
            <div className="calendar-time">
                {i}:00
            </div>
        );
    }

    return(
        <div className="wrapper">

        </div>
    );
  }

render（）{
for（设i=0；i<23；i++）{
返回(
{i} ：00
);
}
返回(
);
}

{[…数组（24）].map（（u，el）=>(
{`${（'0'+el）.slice（-2）}:00`}
))}

render（）{
让时间=”；
for（设i=0；i<23；i++）{
小时+=`
${i}:00
`;
}
返回(
{hours}
);
}

您需要确保元素列表在包装器元素中呈现

如果要映射列表并创建元素列表，那么添加“key”属性也是一个好主意，因为它有助于对渲染内容做出反应

render() {
    // This is just an array of numbers [0,1,2...22,23]
    const hours = [...Array(23).keys()]

    return(
        <div className="wrapper">
           {hours.map((number) => (
                   <div key={`hour-${number}`} className="calendar-time">
                     {/* some string magic to make sure the the hour is always 2 digits long */}
                     {`${('0' + number).slice(-2)}:00`}
                   </div>
               );
           )}
        </div>
    );
}

render（）{
//这只是一个数字数组[0,1,2…22,23]
常量小时数=[…数组（23）.keys（）]
返回(
{hours.map（（数字）=>(
{/*一些字符串魔术，确保小时长度始终为2位数*/}
{`${（'0'+数字）.slice（-2）}:00`}
);
)}
);
}

render() {
    let hours = "";

    for (let i = 0; i < 23; i++) {
        hours += `
            <div className="calendar-time">
                ${i}:00
            </div>
        `;
    }

    return (
        <div className="wrapper">
           {hours}
        </div>
    );
}

render() {
    // This is just an array of numbers [0,1,2...22,23]
    const hours = [...Array(23).keys()]

    return(
        <div className="wrapper">
           {hours.map((number) => (
                   <div key={`hour-${number}`} className="calendar-time">
                     {/* some string magic to make sure the the hour is always 2 digits long */}
                     {`${('0' + number).slice(-2)}:00`}
                   </div>
               );
           )}
        </div>
    );
}