javascript - React 中的条件状态

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' ? '红色':'黑色'}}

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;
       }
   }
}

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