React 中实现获取未来5天的天气预报

最近项目中开发大屏，大屏里面有一个模块是获取某地未来5天的天气预报，如下图：

 一、引入相关依赖

其中天气图标安装 npm install qweather-icons。

可以去对应官网看一下：下载和安装 | 和风天气图标

import React,{ useState ,useEffect,useRef} from 'react';
import 'qweather-icons/font/qweather-icons.css';
import * as echarts from 'echarts';
import locationIcon from '../img/locationIcon.png';

二、创建对应state，用来存储天气数据

        并创建对应方法，请求数据

const [weatherList5, setWeatherList5] = useState([]);useEffect(() => {getWeatherData5();},[])

三、获取到的数据方法

function getWeatherData5(){let url ='https://devapi.qweather.com/v7/weather/7d?location=122.36,41.29&key=d548b08010dd486f91a3e801ba24021f';fetch(url).then((response) => response.json()).then((data) => {if (data.code === '200') {const weather = data.daily.splice(0, 5);setWeatherList5(weather);}}).catch((error) => {console.error('Error fetching weather data:', error);});}

四、天气数据格式如下

五、日期转化星期和日期格式转化

// 星期转化function getDayOfWeek(date){const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];const dateObj = new Date(date);const today = new Date();// 比较年、月、日是否相同const isToday =dateObj.getFullYear() === today.getFullYear() &&dateObj.getMonth() === today.getMonth() &&dateObj.getDate() === today.getDate();if (isToday) {return '今天';} else {return daysOfWeek[dateObj.getDay()];}};// 日期格式转化function formatFxDate(date) {const dateObj = new Date(date);const month = String(dateObj.getMonth() + 1).padStart(2, '0');const day = String(dateObj.getDate()).padStart(2, '0');return `${month}/${day}`;};

六、结构部分代码

<div className="screen_body_right_tianqi_states"><div className="screen_body_right_tianqi_states_name"><div className="screen_body_right_tianqi_states_names">未来5日天气预报</div><div className="screen_body_right_tianqi_states_location"><img className="screen_body_right_tianqi_states_location_img" src={locationIcon}/><div className="screen_body_right_tianqi_states_location_name">辽宁/黑山县</div></div></div><div className="screen_body_right_tianqi_states_list">{weatherList5.map((item,index)=>{return (<div className="screen_body_right_tianqi_states_list_item" key={index}><div className="screen_body_right_tianqi_states_list_item_top"><div className="screen_body_right_tianqi_states_list_item_top_day">{getDayOfWeek(item.fxDate)}</div><div className="screen_body_right_tianqi_states_list_item_top_date">{formatFxDate(item.fxDate)}</div></div><div className="screen_body_right_tianqi_states_list_item_center"><div className="screen_body_right_tianqi_states_list_item_center_max">{item.tempMax}°</div><div style={{height:`${(item.tempMax-item.tempMin)*5}px`}} className="screen_body_right_tianqi_states_list_item_center_column"></div><div className="screen_body_right_tianqi_states_list_item_center_min">{item.tempMin}°</div></div><div className="screen_body_right_tianqi_states_list_item_footer"><i className={`qweather-icons qi-${item.iconDay}-fill`} style={{ fontSize: '20px',color:'#02DFFB'}}></i><div className="screen_body_right_tianqi_states_list_item_footer_textDay">{item.textDay}</div></div></div>)})}</div></div>

七、全部代码如下

import React,{ useState ,useEffect,useRef} from 'react';
import 'qweather-icons/font/qweather-icons.css';
import * as echarts from 'echarts';
import locationIcon from '../img/locationIcon.png';const ScreenBodyRight = () => {const [weatherList5, setWeatherList5] = useState([]);useEffect(() => {getWeatherData5();},[])function getWeatherData5(){let url ='https://devapi.qweather.com/v7/weather/7d?location=122.36,41.29&key=d548b08010dd486f91a3e801ba24021f';fetch(url).then((response) => response.json()).then((data) => {if (data.code === '200') {const weather = data.daily.splice(0, 5);setWeatherList5(weather);}}).catch((error) => {console.error('Error fetching weather data:', error);});}// 时间转化function getDayOfWeek(date){const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];const dateObj = new Date(date);const today = new Date();// 比较年、月、日是否相同const isToday =dateObj.getFullYear() === today.getFullYear() &&dateObj.getMonth() === today.getMonth() &&dateObj.getDate() === today.getDate();if (isToday) {return '今天';} else {return daysOfWeek[dateObj.getDay()];}};// 时间格式转化function formatFxDate(date) {const dateObj = new Date(date);const month = String(dateObj.getMonth() + 1).padStart(2, '0');const day = String(dateObj.getDate()).padStart(2, '0');return `${month}/${day}`;};return (<><div className="screen_body_right">{/*天气预报*/}<div className="screen_body_right_tianqi_states"><div className="screen_body_right_tianqi_states_name"><div className="screen_body_right_tianqi_states_names">未来5日天气预报</div><div className="screen_body_right_tianqi_states_location"><img className="screen_body_right_tianqi_states_location_img" src={locationIcon}/><div className="screen_body_right_tianqi_states_location_name">辽宁/黑山县</div></div></div><div className="screen_body_right_tianqi_states_list">{weatherList5.map((item,index)=>{return (<div className="screen_body_right_tianqi_states_list_item" key={index}><div className="screen_body_right_tianqi_states_list_item_top"><div className="screen_body_right_tianqi_states_list_item_top_day">{getDayOfWeek(item.fxDate)}</div><div className="screen_body_right_tianqi_states_list_item_top_date">{formatFxDate(item.fxDate)}</div></div><div className="screen_body_right_tianqi_states_list_item_center"><div className="screen_body_right_tianqi_states_list_item_center_max">{item.tempMax}°</div><div style={{height:`${(item.tempMax-item.tempMin)*5}px`}} className="screen_body_right_tianqi_states_list_item_center_column"></div><div className="screen_body_right_tianqi_states_list_item_center_min">{item.tempMin}°</div></div><div className="screen_body_right_tianqi_states_list_item_footer"><i className={`qweather-icons qi-${item.iconDay}-fill`} style={{ fontSize: '20px',color:'#02DFFB'}}></i><div className="screen_body_right_tianqi_states_list_item_footer_textDay">{item.textDay}</div></div></div>)})}</div></div></div></>)
}export default ScreenBodyRight

八、css代码：

.screen_body_right_tianqi_states_list_item_center_column{width: 7px;height: 50px;max-height: 50px;background: linear-gradient(180deg, #02DFFB 0%, #2B8EF3 100%);border-radius: 4px;margin: 8px 0px;
}