Resultados de la traducción Quiero cambiar la imagen de fondo en momentos específicos y escribí mi código de la siguiente manera
return ( <div className="degree-box" style={ { backgroundImage: time2 > 19 ? `url(${Night})` || backgroundImage : time2 > 16 ? `url(${Afternoon})` || backgroundImage : time2 > 7 ? `url(${Morning})` : null }} > //code... </div> );Pero me devuelve error que el fondo no reconoce la segunda y tercera imagen. ¿Como puedó resolver esté problema?
Puede hacerlo utilizando operaciones ternarias anidadas.
return ( <div className="degree-box" style={ { backgroundImage: time2 > 19 ? `url(${Night})` : ( time2 > 16 ? `url(${Afternoon})` : ( time2 > 7 ? `url(${Morning})` : null )) }} > //code... </div> );No es necesario complicar demasiado las cosas. Como puede ver, incluso StackOverflow no puede resaltar su código como se esperaba, porque ya tiene definido el nombre de su propiedad, todo lo que necesita proporcionar es un valor.
{ backgroundImage: time2 > 19 ? `url(${Night})` : time2 > 16 ? `url(${Afternoon})` : time2 > 7 ? `url(${Morning})` : null }Incluso más corto para evitar repetirte;
{ backgroundImage: `url(${time2 > 19 ? Night : time2 > 16 ? Afternoon : time2 > 7 ? Morning:null})` }