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

Question

[Fedyaaaa]

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

export default 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>
  );
}

Answer 1

[Aetae]

Во-первых: зачем ты лезешь в dom руками через ref? Пиши в state и используя значение в свойстве style компонента. Или даже не в state а тупо в переменную.

Во-вторых: чтобы сборщик обработал картинку из хрен пойми откуда - надо её импортировать через import и уже потом подставлять результат.
Однако если картинка лежит в public, это не обязательно, можно прям на неё ссылаться от корня. Только посмотри где она действительно лежит: если лежит в /public/img/morning.jpg, то писать надо соответственно '/img/morning.jpg без всяких assets и наоборот.

Answer 2

[Никита Геннадич]

Ну тебе верно выше сказали: тут не нужно вот так дико делать.

Самый правильный вариант менять не сам стиль, а прописать бэкграунд в CSS и менять только класс у блока, useRef тут абсолютно точно не нужно использовать, это очень дурной тон.

Потом - я не очень понимаю зачем тебе тут вообще useEffect? Тут он срабатывать будет только при перерисовке компонента извне, насколько я могу судить. В таком простом случае вообще не нужен ни useEffect, ни useState. Просто присваивай переменной нужное имя класса в своей цепочке ифов и всё.

Ну и да, учитывай, что сборщик ведь при сборке картинки все кидает в какую-то папку, куда у тебя там всё собирается, поэтому и нужно их импортировать через иморт, чтоб он знал как менять пути. А в твоём случае у тебя просто строки и эти пути к картинкам не верны в итоге относительно собранного приложения, так что работать в твоём варианте и не будет ничего.