时间戳

首页 > 解决方案 > 根据 API 响应更改类

reactjs - 根据 API 响应更改类

问题描述

我想根据 API 的响应将类更改为我的 div 容器。更具体地说，如果 API 返回超过 0 度的温度，我希望背景为红色，如果低于我希望它为蓝色。（稍后将是图像，但现在是颜色。）

我想检查一下celsius={this.state.celsius}。

更新所有代码

import './App.css';
import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import Search from './components/Search';
import Form from './components/Form';

const API_KEY = '*********************'

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      city: undefined,
      celsius: undefined,
      wind: undefined,
      feelsLike: undefined
    };
  }
     
evenDeagree(temp){
  let cell = Math.floor(temp)
  return cell;
}   

getWeather = async (e) => {   
  try {
  e.preventDefault();
   "city."
  const city= e.target.elements.city.value;
 datan.
  if(city){    

    const api_call = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`
    );
    reponse
    const response = await api_call.json();
    console.log(response)

    this.setState({
      city: "City: " + `${response.name}`,
      celsius: "Current Degree: " + this.evenDeagree(response.main.temp) + "°C",
      wind: "Wind m/s: " + this.evenDeagree(response.wind.speed),
      feelsLike: "Känns som: " + this.evenDeagree(response.main.feels_like) + "°C"

      });
  }   
} 

catch(error) {
  document.getElementById("errMessage").innerHTML =  "City not found, please try again";
  
}

}

  render(){
    return(
      <div className="App">
      <Header />
      <div className="mainContainer">
      <Form loadweather={this.getWeather}/> 

      <div className={this.state.celsius > 0 ? "red" : "blue"}>
      <Search 
          city={this.state.city} 
          celsius={this.state.celsius}
          wind={this.state.wind}
          feelsLike={this.state.feelsLike}
        />
        </div>

    </div>
      <Footer />
    </div>
    );
  }
}

标签： reactjsapifetch

解决方案

您可以通过多种方式实现这一点，在 useState 的帮助下，您可以使用默认类设置状态并使用网络请求完成更新类。

或者，如果您的条件不满足，您可以使用 css modulse 并添加一个类数组并加入另一个类等。

下面是一个示例，可帮助您了解如何动态传递类名。

代码沙箱 => https://codesandbox.io/s/exciting-gagarin-ugy7d?file=/src/styles.css:0-162

import React, { useEffect, useState } from "react";
import "./styles.css";

const App = () =>
{
  const [className, setClassName] = useState("App");

  useEffect(() => 
  {
    //Fake Api Cal
    setTimeout(() => 
    {
      setClassName("App-New");
    }, 3000);
  }, []);

  return (
    <div className={className}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

export default App;


/*styles.css*/
.App 
{
  font-family: sans-serif;
  text-align: center;
  background: green
}


.App-New 
{
  font-family: sans-serif;
  text-align: center;
  background: red
}

推荐阅读