React中基于动态日程与当前时间更新Conditional state实现条件样式

嘿，我来帮你一步步搞定这个需求！咱们分几个核心步骤来实现，代码示例都是基于你给出的类组件场景哈：

1. 先搞定API数据获取与state初始化 #

首先，你需要在组件挂载时请求API拿到动态日程数据，然后把它存到state里。同时，咱们还要初始化当前时间的状态判断逻辑：

class ScheduleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      schedules: {}, // 初始化为空对象，等API返回后填充
      status: 'morning' // 默认初始状态
    };
    this.timeChecker = null; // 用来存定时器ID，方便组件卸载时清理
  }

  componentDidMount() {
    // 模拟API请求（实际项目里替换成你的真实API调用）
    fetch('你的日程API地址')
      .then(res => res.json())
      .then(schedules => {
        this.setState({ schedules }, () => {
          // 拿到数据后立刻判断一次当前状态
          this.updateStatus();
          // 设置定时器，每分钟更新一次状态（保证实时性）
          this.timeChecker = setInterval(() => this.updateStatus(), 60000);
        });
      })
      .catch(err => console.error('获取日程数据失败:', err));
  }

  componentWillUnmount() {
    // 组件卸载时清理定时器，避免内存泄漏
    if (this.timeChecker) clearInterval(this.timeChecker);
  }

2. 编写时间转换与状态判断函数 #

要比较时间，直接用字符串不方便，咱们把时间转成分钟数来做数值对比会更靠谱。然后根据当前时间落在哪个日程区间，更新对应的status：

// 把时间字符串（如"6:30"）转换成总分钟数
  convertTimeToMinutes = (timeStr) => {
    const [hours, minutes] = timeStr.split(':').map(Number);
    return hours * 60 + minutes;
  };

  // 更新当前状态
  updateStatus = () => {
    const { schedules } = this.state;
    if (!Object.keys(schedules).length) return; // 没拿到数据时不执行

    // 获取当前时间的分钟数
    const now = new Date();
    const currentMinutes = now.getHours() * 60 + now.getMinutes();

    // 把日程时间都转成分钟数，方便对比
    const morningMin = this.convertTimeToMinutes(schedules.morning);
    const middayMin = this.convertTimeToMinutes(schedules.midday);
    const afternoonMin = this.convertTimeToMinutes(schedules.afternoon);
    const nightMin = this.convertTimeToMinutes(schedules.night);

    // 判断当前时间所属的区间
    let newStatus = 'morning';
    if (currentMinutes >= middayMin && currentMinutes < afternoonMin) {
      newStatus = 'midday';
    } else if (currentMinutes >= afternoonMin && currentMinutes < nightMin) {
      newStatus = 'afternoon';
    } else if (currentMinutes >= nightMin || currentMinutes < morningMin) {
      newStatus = 'night';
    }

    // 只有状态变化时才更新，避免不必要的重渲染
    if (newStatus !== this.state.status) {
      this.setState({ status: newStatus });
    }
  };

3. 渲染组件时应用动态样式 #

最后，在渲染日程组件的时候，根据state里的status来设置对应的样式：

render() {
    const { status, schedules } = this.state;
    // 示例：根据status设置文字颜色，你可以扩展成更多样式
    const scheduleStyle = {
      color: status === 'morning' ? 'red' : 
             status === 'midday' ? 'orange' : 
             status === 'afternoon' ? 'blue' : 'purple',
      fontSize: '18px',
      padding: '10px'
    };

    return (
      <div style={scheduleStyle}>
        <h3>当前时段: {status}</h3>
        <ul>
          {Object.entries(schedules).map(([period, time]) => (
            <li key={period}>
              {period.charAt(0).toUpperCase() + period.slice(1)}: {time}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ScheduleComponent;

几个需要注意的细节 #

• 边界时间处理：比如当前时间刚好是13:00（midday的时间），咱们的逻辑会把它归到midday时段，你可以根据需求调整判断条件（比如改成>还是>=）。
• 定时器清理：一定要在组件卸载时清除定时器，不然会导致内存泄漏。
• 空数据处理：如果API请求失败或者还没返回数据，咱们的判断函数会直接返回，避免报错。

内容的提问来源于stack exchange，提问作者fauxxi