反应中的条件状态

Question

假设我有这些初始状态

this.state = {schedules: [], status: 'morning'}

和动态时间表的对象是从某些一天可能会改变的API提取的JSON。例如

schedules = {"morning": "6:30", "midday": "13:00", "afternoon":"17:30", "night":"21:00"}

现在如何在当前时间差上分别更改this.state.status？例如curTime = '14:30'，所以this.state.status = 'midday'

这样做的目的是以不同的方式（基于this.state.status）来样式的每个计划组件，例如。style={{color: this.state.status == 'morning' ? 'red' : 'black'}}

Answer 1

功能类似于此功能

updateStatus(){
   const keys = Object.keys(this.state.schedules).reverse();
   for(i = 0; i < keys.length; i++) {
       if(curTime > this.state.schedules[keys[i]]) {
           this.setState({status:keys[i]});
           break;
       }
   }
}

您只需要考虑的唯一一件事就是如何比较时间。