如何循环react条件呈现语句

Question

我有一个react weather应用程序，当我的应用程序从api取回数据时，我希望它根据取回的数据显示背景视频。来自openweathermap的Api。

基本上，我的逻辑是"；如果天气描述＝天气描述；资产"；文件夹在我的react应用程序(单页应用程序(中，每个状态只想显示一个视频。

代码有效，但我正在寻找更高效的解决方案，尤其是如果我想根据从api获取的数据添加更多视频。我试着在其中加入一个循环和一个包含视频描述的数组，但还没有成功。

谢谢！这是我在这里的第一篇文章。

import rainy from './assets/rainy.mp4';
import clearsky from './assets/clearsky.mp4';
import cloudy from './assets/cloudy.mp4';
import mist from './assets/mist.mp4';
import overcast from './assets/overcast.mp4';

{(data.weather ? data.weather[0].description : null) === 'few clouds'  &&
<video autoPlay="autoplay" muted loop>
<source src={cloudy} type="video/mp4"/>
</video>
} 
{(data.weather ? data.weather[0].description : null) === 'clear sky' && 
<video autoPlay="autoplay" muted loop>
<source src={clearsky} type="video/mp4"/>
</video>
}

{(data.weather ? data.weather[0].description : null) === 'overcast' && 
<video autoPlay="autoplay" muted loop>
<source src={overcast} type="video/mp4"/>
</video>
}

下面是我想要获取的数据的json文件截图。

"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04d"
}
],

Answer 1

您可以通过定义一个基于description:返回src的辅助函数来简化代码

const getSource = (description) => {
switch (description) {
case 'few clouds':
return cloudy;
case 'clear sky':
return clearsky;
...
default:
return null;
}
}
{
(data.weather && data.weather.length > 0 && getSource(data.weather[0].description) && (
<video autoPlay='autoplay' muted loop>
<source src={getSource(data.weather[0].description)} type='video/mp4' />
</video>
);
}

Answer 2

这是我的答案。

{data.weather &&
data.weather[0].description === 'few clouds' ?
<video autoPlay="autoplay" muted loop>
<source src={cloudy} type="video/mp4"/>
</video>
: null
}