如何根据API收到的时间改变CSS类

Question

我正在用 React 构建一个天气应用程序，到目前为止一切顺利。现在的问题是我想要一个 "lightmode" 和 "darkmode" 应该是 CSS classes 会根据 API 收到的 sunrise/sunset 次而改变=].当我在 vanilla JS 中这样做时，我使用了一个将时间戳转换为小时并将当前小时与 sunrise/sunset 进行比较的函数，然后决定显示哪个 class，就像这样

function getMode(response) {
  let today = response.data.dt;
  let timezone = response.data.timezone;
  let difference = today + timezone - 3600;
  let hours = timeConverter(difference);
  let mode = document.getElementById("app");
  let sunrise = response.data.sys.sunrise;
  let difference2 = sunrise + timezone - 3600;
  let currentSunrise = timeConverter(difference2);
  let sunset = response.data.sys.sunset;
  let difference3 = sunset + timezone - 3600;
  let currentSunset = timeConverter(difference3) - 1;
  if (hours > currentSunset) {
    mode.classList.add("darkmode").remove("lightmode");
  }
  else if (hours < currentSunrise) {
    mode.classList.add("darkmode").remove("lightmode");
  } else {
    mode.classList.remove("darkmode").add("lightmode");
  }
}

axios.get(apiUrl).then(getMode)

<body>
    <div id="app" class="lightmode">

然后CSS看起来像这样

.lightmode h1 {
  font-family: "Josefin Sans", sans-serif;
  text-align: right;
  color: #06384d;
  font-size: 32px;
  font-weight: 700;
}

.lightmode {
  font-family: "Josefin Sans", sans-serif;
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  border-style: solid;
  border-radius: 30px;
  border-color: #096386;
}

#app {
  margin: 10px 400px;
  padding: 10px 10px;
}

(...)

.darkmode h1 {
  font-family: "Josefin Sans", sans-serif;
  text-align: right;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}

.darkmode {
  font-family: "Josefin Sans", sans-serif;
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  border-style: solid;
  border-radius: 30px;
  border-color: #096386;
}

而且效果很好。现在在 React 中（这里是新手）我不知道如何解决这个问题。我一直在阅读有关在 React with state 中动态更改 CSS classes 的内容，但我不知道如何将其与 API 响应结合起来。有什么建议吗？

Answer 1

在 React 中动态改变 CSS classes 的关键部分是：

<div className={`App ${this.state.displayMode}`}>

容器的 class 名称将在 displayMode 的状态发生更改时更新，在本例中，附加到 class App，结果是 App darkmode 并照此呈现。

<div class="App darkmode">

示例代码/用例：

class App extends Component {
  state = {
    displayMode: "lightmode"
  };

  getMode = response => {
    let _displayMode;
    // Logic for determining the mode
    return _displayMode;
  }

  componentDidMount() {
    // Make API call here and run your logic to determine the mode
    axios.get(apiUrl).then(getMode).then(displayMode => {
    // As a callback to your function, set the state for displayMode
      this.setState({
        displayMode: displayMode
      })
    });
  }

  render() {
    return (
      <div className={`App ${this.state.displayMode}`}>
      </div>
    );
  }
}

Answer 2

您可以将类名存储在状态中并在您的函数中更改它。

class Demo extends Component {
 constructor(props) {
    super(props);

    this.state = {
      stClass: "lightmode"

    }
 }
 state = {
    stClass: "lightmode"
 }

 componentDidMount = () => {
    [call your function here and change the state of stClass]  
  }

 render() {
    return (
      <div className={`${this.state.stClass}`}>
       [your code here]
     </div>
    )
 }

}

如何根据API收到的时间改变CSS类

How to change CSS classes according to time received by API

css

classname

reactjs