如何循环反应条件渲染语句

Question

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

基本上我的逻辑是“如果天气描述 = 天气描述，播放来自“资产”文件夹的 description.mp4 视频。只想在我的反应应用程序（单页应用程序）中显示每个 state 的一个视频。

该代码有效，但我正在寻找更有效的解决方案，特别是如果我想根据从 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

这是我的答案。

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

Answer 2

您可以通过定义一个助手 function 来简化您的代码，该助手根据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>
  );
}