Как поменять background-image через React-код в зависимости от условия if-else?

Question

Хочу менять background-image в блоке <div> в зависимости от условия.
Использовал useRef для привязки к блоку ref, но через него не удаётся и не добавляется стиль CSS. Возможно, это из-за не работающего пути к изображению, которое находится в папке public, хотя, вроде как, всё должно работать. Может кто-то знает или делал подобный функционал?

const { useState, useRef, useEffect } = React;

function Welcome() {
  const [interval, setInterval] = useState(null);
  const timeRef = useRef(null);

  useEffect(() => {
    const time = new Date();
    if (time.getHours() >= 6 && time.getHours() < 12) {
      setInterval("1");
      welcomeRef.current.style.backgroundImage = "/assets/img/morning.jpg";
    } else if (time.getHours() >= 12 && time.getHours() < 18) {
      setInterval("2");
      welcomeRef.current.style.backgroundImage = "/assets/img/morning.jpg";
    } else if (time.getHours() >= 18) {
      setInterval("3");
      welcomeRef.current.style.backgroundImage = "/assets/img/morning.jpg";
    }
  });

  return (
    <section className="welcome" ref={timeRef}>
      <div className="time__wrapper">
        <div className="time__text">
          <h1 className="time__heading">Сейчас: {interval}!</h1>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <Welcome />
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

Не вижу никакого смысла использовать тут useRef, useState и useEffect.
По крайней мере, если не планируется динамическое изменение стейта по времени.

Создаём костанту с самовыполняющейся функцией, в ней делаем проверку на время, и как мне показалось, нужно вернуть массив значений - ['название изображения', 'название времени суток'].
После чего для определённого элемента добавляем атрибут style, для изображения выставляем backgroundImage: `url(/assets/img/${timeOfDay[0]}.jpg)` , чтобы выставить фоновое изображение.
И в текст добавляем Сейчас: { timeOfDay[1] }, чтобы получить "Сейчас: ночь!", например.

function Welcome() {
  const timeOfDay = (() => {
    const hour = new Date().getHours();
    
    // Давно писал похожее и искал инфу когда какое время суток, это типа верные данные :)
    if(hour >= 0 && hour < 4)    return ['https://i.imgur.com/LnI7p4u.png', 'ночь'];
    if(hour >= 4 && hour < 12)   return ['https://i.imgur.com/H6gc4zR.png', 'утро'];
    if(hour >= 12 && hour < 17)  return ['https://i.imgur.com/NqppFbp.png', 'день'];
    if(hour >= 17 && hour <= 23) return ['https://i.imgur.com/s8bzLmk.png', 'вечер'];
  })();

  return (
    <section
      className="welcome"
      style={ {
        backgroundImage: `url(${timeOfDay[0]})`
      } }
    >
      <div className="time__wrapper">
        <div className="time__text">
          <h1 className="time__heading">Сейчас: {timeOfDay[1]}!</h1>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <Welcome />
);

body {display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}

.welcome {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(100vh - 20px);
  height: auto;
  aspect-ratio: 1;
  max-width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

БЛОГ НА HUSL

Как поменять background-image через React-код в зависимости от условия if-else?

Ответы (1 шт):