reactjs - 返回与jsx嵌套的循环开关?
问题描述
我正在使用天气 API 并设法得到我想要的一切。但是,该 api 带有无聊和乏味的图标,我想用我自己的动画天气图标替换它们。我决定用自定义动画天气图标替换天气图标。但是,我一直在弄清楚如何在我的退货声明中返回自定义图标。
这是我的代码,我有很多,所以我只会显示相关部分。
const weatherData = async () => {
// Get forecast 5 days etc..
const weatherResponse1 = fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${data.city},${data.country_code}&appid=&units=imperial`)
const [response1] = await Promise.all([weatherResponse1]);
const weatherJson1 = await response1.json();
let newForecast = []
let weathericonState = []
for (let i = 0; i < weatherJson1.list.length; i+=8){
switch (weatherJson1.list[i].weather[0].icon){
// clear night or few clouds day or night time or night mist
case '01n':
case '03n':
case '03d':
case '04n':
case '50n':
weathericonState = (
<div class="icon cloudy">
<div class="cloud"></div>
<div class="cloud"></div>
</div>
)
break;
// clear day time or day mist
case '01d':
case '50d':
weathericonState = (
<div class="icon sunny">
<div class="sun">
<div class="rays"></div>
</div>
</div>
)
break;
// broken clouds day time
case '04d':
weathericonState = (
<div class="icon sun-shower">
<div class="cloud"></div>
<div class="cloud"></div>
<div class="sun">
<div class="rays"></div>
</div>
</div>
)
break;
}
newForecast.push(weatherJson1.list[i])
}
this.setState({
weatherData: newForecast,
})
}
const weatherResults = weatherData();
weatherResults;
}
});
}
}
退货声明:
return (
<div className="container-fluid" id="userfluidprofile">
<div className="row">
<div className="col-md-7">
{
this.state.weatherData.map((row, index) =>
<div className="weatherContainer" key={index}>
// I want to replace this img with my custom animated icons returned from my nested looped conditional.
<img src={'https://openweathermap.org/img/w/' + row.weather[0].icon + '.png'} alt="Weather Icon" />
</div>
)
}
</div>
</div>
</div>
)
解决方案
推荐阅读
- php - PHP Slim v3 在响应标头中添加 cookie
- kotlin - 我可以使用 kotlin“也”功能来缩短代码吗?
- android - “truetime-android” api 有时会返回错误的日期和时间?
- node.js - 静态属性在nodejs中的多个文件中不起作用
- c# - RadioButton 内容需要占用空间
- mysql - 在日期范围内为每个项目和每个月计算库存中的项目数量 - mysql
- reactjs - 将 React Router 的 props 与 MobX Store 同步
- php - 尝试在控制器内批量分配值时未找到列错误
- extjs - 没有 TopAxis 聚合器的 ExtJs PivotGrid
- python - 我们如何在 frappe (ERPNEXT) 中动态添加子表