javascript - 如何在React中动态改变文本的颜色？

Question

我想在一天中的特定时间更改标题的颜色。(例如晚上为蓝色，早晨为绿色......) 为此，我尝试使用 inline-css(在 js 文件内)。

我的CSS文件:

.heading {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

我的js文件:

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

const root = document.getElementById("root");

const curretnTime = new Date().getHours();

if (curretnTime < 12 && curretnTime >= 0) {
  ReactDOM.render(
    <div>
      <h1 className="heading">Good Morning</h1>
    </div>,
    root
  );
} else if (curretnTime >= 12 && curretnTime <= 18) {
  ReactDOM.render(
    <div>
      <h1>Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div>
      <h1>Good Evening</h1>
    </div>,
    root
  );
}

我知道这是一个很容易问的问题，但任何答案都会有帮助。谢谢。

Answer 1

您应该使用内联样式，例如:

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

const root = document.getElementById("root");

const curretnTime = new Date().getHours();

let timeOfDay = 'evening';   // not used

let timeOfDayColor = 'blue';
let timeOfDayMessage = 'Good Evening';

if (curretnTime < 12 && curretnTime >= 0) {
   timeOfDay = 'morning';

   timeOfDayColor = 'green';
   timeOfDayMessage = 'Good Morning';

} else if (curretnTime >= 12 && curretnTime <= 18) {
   timeOfDay = 'afternoon';

   timeOfDayColor = 'purple';
   timeOfDayMessage = 'Good Afternoon';
}

ReactDOM.render(
    <div>
      <h1 className="heading" style={{backgroundColor: timeOfDayColor}} >{timeOfDayMessage}</h1>
    </div>,
    root
);

style={{backgroundColor: timeOfDayColor}} 是覆盖 CSS 样式的内联样式:https://www.w3schools.com/react/react_css.asp

但是，您应该真正使用组件，而不是在 ReactDOM.render 方法中包含所有代码。也许先尝试一下 react 教程:https://reactjs.org/tutorial/tutorial.html