Reactjs 如何为特定时间戳呈现react组件

我是新来的。我正在构建一个员工时间跟踪器应用程序，在该应用程序中，我希望呈现特定时间间隔的“午餐图标”（例如，从上午11:00:00到下午1:00:00-12小时格式）。如何使用this.state.currentTime（在下面的代码中）进行此操作

class Options extends React.Component {

  state = {
    currentTime: new Date().toLocaleTimeString()
   }

renderLunchIcon(employee){
  if(employee.isLoggedIn === true && *this.state.currentTime between '11:00:00 AM' and '1:00:00 PM'*){
    return (
    <div class="field">
    <Link onClick={this.handleLunch}>
      <h3><i class="black massive utensils icon"></i></h3>
      <label><h1 id="text-color">Lunch</h1></label>
      </Link>
    </div>
  );
  }
}
}

类选项扩展了React.Component{
状态={
currentTime:新日期（）.toLocaleTimeString（）
}
renderLunchIcon（员工）{
如果（employee.isLoggedIn===true&&*this.state.currentTime介于'11:00:00 AM'和'1:00:00 PM'*）{
返回(
午餐
);
}
}
}

---

请指导我完成此操作。

将日期作为日期对象保留在状态可能更容易，然后您可以使用

date.gethours（）

以24小时格式获取当前小时，然后测试其是否介于11和11之间13@WebbH-谢谢。。这很有效！！！