@Fedyaaaa

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

Хочу менять 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>
  );
}
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 2
Aetae
@Aetae
Тлен
Во-первых: зачем ты лезешь в dom руками через ref? Пиши в state и используя значение в свойстве style компонента. Или даже не в state а тупо в переменную.

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы