javascript - 如何优化重复条件渲染中的代码？

Question

在我的项目中，我在条件渲染中重复了一段代码。如果减少，则代码得到优化。天气图标根据 API 的天气描述显示。请参阅下面的代码以供引用。

天气.js

{ (time >= sunsetTime || time <= sunriseTime) ? 
                    /* Night Weather Description */
                    props.description == 'Haze' ? <Haze/>: 
                    [props.description == 'Light rain' ? <LightRain/> : 
                    /* Only 3 decription are different */
                    /* 1. The first one */
                    [props.description == 'Overcast clouds' ? <OvercastCloudsNight/> :
                    /* 2. The second one */ 
                    [props.description == 'Clear sky' ? <ClearSkyNight/> :
                    [props.description == 'Few clouds' ? <BrokenClouds/> : 
                    [props.description == 'Scattered clouds' ? <ScatteredClouds/> : 
                    [props.description == 'Broken clouds' ? <BrokenClouds/> : 
                    [props.description == 'Shower rain' ? <LightRain/> : 
                    /* 3. The last one */
                    [props.description == 'Rain'? <NightRain/>:
                    [props.description == 'Drizzle'? <LightRain/>: 
                    [props.description == 'Thunderstorm' ? <ThunderRain/>: 
                    [props.description == 'Snow' ? <Snow/>: 
                    [props.description == 'Mist' ? <Haze/>:
                    [props.description == 'Freezing rain' ? <FreezingRain/>: 
                    [props.description == 'Smoke' ? <Haze/>: 
                    [props.description == 'Heavy intensity rain' ? <ThunderRain/> :
                    [props.description == 'Moderate rain' ? <ModerateRain/> :
                    [props.description == 'Light intensity drizzle' ? <LightRain/>:
                    [props.description == 'Light intensity shower rain' ? <LightRain/>:
                    [props.description == 'Thunderstorm with rain' ? <ThunderRain/>:
                    [props.description == 'Thunderstorm with light rain' ? <ThunderLightRain/>:
                    [props.description == 'Very heavy rain' ? <ThunderLightRain/>:'']
                    ]]]]]]]]]]]]]]]]]]]]    
                    :
                    /* Day Weather Description */
                props.description == 'Haze' ? <Haze/>: 
                [props.description == 'Light rain' ? <LightRain/> : 
                [props.description == 'Overcast clouds' ? <OvercastClouds/> : 
                [props.description == 'Clear sky' ? <ClearSky/> :
                [props.description == 'Few clouds' ? <BrokenClouds/> : 
                [props.description == 'Scattered clouds' ? <ScatteredClouds/> : 
                [props.description == 'Broken clouds' ? <BrokenClouds/> : 
                [props.description == 'Shower rain' ? <LightRain/> : 
                [props.description == 'Rain'? <SunnyRain/> :
                [props.description == 'Drizzle'? <LightRain/>: 
                [props.description == 'Thunderstorm' ? <ThunderRain/>: 
                [props.description == 'Snow' ? <Snow/>: 
                [props.description == 'Mist' ? <Haze/>:
                [props.description == 'Freezing rain' ? <FreezingRain/>: 
                [props.description == 'Smoke' ? 'Its smoke': 
                [props.description == 'Heavy intensity rain' ? <ThunderRain/> :
                [props.description == 'Moderate rain' ? <ModerateRain/> :
                [props.description == 'Light intensity drizzle' ? <LightRain/>:
                [props.description == 'Light intensity shower rain' ? <LightRain/>:
                [props.description == 'Thunderstorm with rain' ? <ThunderRain/>:
                [props.description == 'Thunderstorm with light rain' ? <ThunderLightRain/>:
                [props.description == 'Very heavy rain' ? <ThunderLightRain/>:'']
                ]]]]]]]]]]]]]]]]]]]]
                }

正如您在上面的评论中看到的，只有提到的内容是唯一的，其余所有描述都是重复的。那么有什么合适的解决方案来优化代码吗？

Answer 1

您可以像这样创建一个对象(也称为字典):

var base_dict = {'Haze': (<Haze/>), 'Light rain': (<LightRain/>), 
//...
}
var day_dict = {'Overcast clouds': (<OvercastCloudsNight/>), 'Clear sky': (<ClearSkyNight/>), 'Rain': (<NightRain/>)}
var night_dict = {'Overcast clouds': (<OvercastClouds/>), 'Clear sky': (<ClearSky/>), 'Rain': (<SunnyRain/>)}
Object.assign(day_dict, base_dict);
Object.assign(night_dict, base_dict);

然后使用这个对象:

{ (time >= sunsetTime || time <= sunriseTime) ? day_dict[props.description]: night_dict[props.description] }