javascript - React 中的条件状态
问题描述
假设我有这些初始状态
this.state = {schedules: [], status: 'morning'}
以及从 API 中获取的动态计划 JSON 的对象,该 API 可能会在某一天发生变化。例如
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'}}
解决方案
与此类似的功能应该可以工作
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;
}
}
}
您唯一需要考虑的是如何比较时间。
推荐阅读
- r - R - 检查日期范围是否包含某个值,使用来自不同数据框的日期
- lc3 - 你会如何在像 Pennsim 这样的 LC-3 模拟器中画一条垂直线?
- encryption - 使用 RSA 算法对字母进行加密
- python - 融化包含字典列的熊猫数据框,以便字典值也被融化
- javascript - 推送后数组索引返回未定义 - Papa Parse
- sql - Row_Number Sybase SQL Anywhere 在多个条件下更改
- python - 将布尔数组(即 True False)转换为实际值?
- bash - 如何使用awk在bash中的字符串中查找字符
- c - C中的Dijkstras算法实现给出错误(但几乎正确)的输出
- r - 匹配字符串在多列上循环