如何在React中调用函数并根据一天中的时间更改标题文本和颜色？

Question

我正在尝试根据一天中的时间更改h1标题中的文本和颜色。
使用我的代码时，我得到了错误:“无法设置NULL的属性”inner text“。
我试图了解如何在呈现部分实现函数，但没有成功。
下面是我的代码:

js prettyprint-override">import React from "react";
import ReactDOM from "react-dom";

const morning = { color: "blue" };
const afternoon = { color: "green" };
const night = { color: "grey" };
const date = new Date();
const currentHour = date.getHours();

function sayHello() {
  const heading = document.querySelector("h1");
  if (currentHour < 12) {
    heading.innerText = "Good Morning!";
    heading.style.color = morning;
  } else if (currentHour > 12 && currentHour < 18) {
    heading.innerText = "Good Afternoon!";
    heading.style.color = afternoon;
  } else {
    heading.innerText = "Good Night!";
    heading.style.color = night;
  }
}

ReactDOM.render(
  <h1 className="heading">{sayHello()}</h1>,
  document.getElementById("root")
);

Answer 1

你必须使用设置时间间隔也，它运行你的脚本像1分钟后或任何你想设置，然后你可以只检查时间和改变你的状态

Answer 2

我将使用UseEffect和UseEffect挂钩。

https://codesandbox.io/s/modern-Fog-qyjn9？file=/src/sayhello.js:82-117

import React, { useState, useEffect } from "react";

const morning = { color: "blue" };
const afternoon = { color: "green" };
const night = { color: "grey" };

const SayHello = () => {
  const [helloText, setHelloText] = useState("");
  const [helloTextColor, setHelloTextColor] = useState("");

  useEffect(() => {
    const date = new Date();
    const currentHour = date.getHours();
    if (currentHour < 12) {
      setHelloText("Good Morning!");
      setHelloTextColor(morning);
    } else if (currentHour > 12 && currentHour < 18) {
      setHelloText("Good Afternoon!");
      setHelloTextColor(afternoon);
    } else {
      setHelloText("Good Night!");
      setHelloTextColor(night);
    }
  }, []);
  return <div style={{ color: helloTextColor }}>{helloText}</div>;
};

export default SayHello;

Answer 3

这不是你用react的方式。您可能需要尝试如下操作:

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

function Hello() {
  const currentHour = new Date().getHours();
  
  const [color, greeting] = 
    currentHour < 12 ? ["blue", "Good Morning!"] : 
    currentHour > 12 && currentHour < 18 ? ["green", "Good Afternoon!"] :
    ["grey", "Good Night!"];


  return (
    <h1 style={{color}}>
      {greeting}
    </h1>
  )
}

ReactDOM.render(
  <Hello />,
  document.getElementById("root")
);