如何在 React 中定义时间范围？

Question

这是我的代码。我试图定义一个小时范围，以便它根据一天中的时刻改变颜色，但我不知道如何创建一个范围（例如从 7 点到 12 点 -> 早上）。现在的问题是，如果我把凌晨 3 点设置为早上，我想让它说晚上，但是，当然，我不能超过 23 小时来设置晚上。你能帮帮我吗？

import React from "react";
import ReactDOM from "react-dom";

const date = new Date(2021, 1, 1, 3);

const time = date.getHours();

let customStyle = {
  color: ""
};

function getTime() {
  const morning = time < 12;
  const afternoon = time < 18;
  const night = time < 23;

  if (morning) {
    customStyle = {
      color: "red"
    };
    return "Good morning";
  } else if (afternoon) {
    customStyle = {
      color: "green"
    };
    return "Good afternoon";
  } else if (night) {
    customStyle = {
      color: "blue"
    };
    return "Good night";
  }
}

console.log(getTime());

ReactDOM.render(
  <h1 className="heading" style={customStyle}>
    {" "}
    {getTime()}{" "}
  </h1>,

  document.getElementById("root")
);

Answer 1

您需要根据位置和日期获取日出时间。您可以为此使用 sunrise-sunset-js 库。

Answer 2

你可以更精确地定义你的范围

const morning = false;
const afternoon = false;
const night = false;

if (time > 7 && time <= 12) {
morning = true;
} else if (time > 12 && time <= 18) {
afternoon = true;
} else {
night = true;
}