React按指定时间切换背景图时无法识别第二、第三张图如何解决

你代码中backgroundImage的赋值逻辑存在语法错误，嵌套三元运算符里多余的|| backgroundImage属于非法语法，导致19点之后的第一个条件分支可以正常赋值外，其余时间区间的取值逻辑全部失效，无法正确识别到下午、上午对应的背景图。

直接简化backgroundImage的三元判断逻辑即可，修正后的代码如下：

return (
  <div className="degree-box" style={{
    backgroundImage: time2 > 19 ? `url(${Night})` : 
                    time2 > 16 ? `url(${Afternoon})` : 
                    time2 > 7 ? `url(${Morning})` : null
  }}>
    // code...         
  </div>
);

• 可以提前做图片资源的加载校验，避免资源路径错误导致背景图不显示：可以在代码开头打印Morning、Afternoon、Night三个变量，确认输出的是正确的图片资源路径。
• 如果需要做缺省兜底，可以把最后一个null替换成默认背景图的url()写法，避免7点前没有背景的情况。

内容的提问来源于stack exchange，提问作者user16857857