Как изменить фоновое изображение с помощью React в зависимости от условия if-else?

Question

Никола

react

Как изменить фоновое изображение с помощью React в зависимости от условия if-else?

Как изменить фон изображения в блоке div в зависимости от времени суток, используя useRef для ссылки на блок? Я пытался сделать это, но у меня не получается применить стиль CSS через реф. Возможно, проблема связана с неправильным путем к изображению, которое хранится в папке public. Кто-нибудь сталкивался с подобной задачей или знает, как это реализовать? <br/> <pre><code class="javascript">export default function Welcome() {
  const [interval, setInterval] = useState(null);
  const timeRef = useRef(null);

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

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

31 октября 2024 г. 14:22

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы изменить фоновое изображение в зависимости от времени суток с использованием `useRef`, вам нужно правильно настроить вашу логику в `useEffect`. Также необходимо правильно установить путь к изображению.

Вот исправленный код, который демонстрирует, как это сделать:

```javascript
import React, { useEffect, useRef, useState } from 'react';

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

  useEffect(() => {
    const time = new Date();
    let backgroundImage;

    if (time.getHours() >= 6 && time.getHours() < 12) {
      setInterval("Утро");
      backgroundImage = "url('/assets/img/morning.jpg')";
    } else if (time.getHours() >= 12 && time.getHours() < 18) {
      setInterval("День");
      backgroundImage = "url('/assets/img/day.jpg')";
    } else {
      setInterval("Вечер/Ночь");
      backgroundImage = "url('/assets/img/night.jpg')";
    }

    if (timeRef.current) {
      timeRef.current.style.backgroundImage = backgroundImage;
      timeRef.current.style.backgroundSize = 'cover'; // чтобы изображение занимало весь блок
      timeRef.current.style.backgroundPosition = 'center'; // центрируем изображение
    }
  }, []); // Убедитесь, что зависимости в useEffect пустые, чтобы код выполнялся только один раз при монтировании

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

### Объяснения:
1. **useEffect**: Убедитесь, что зависимости пустые `[]`, чтобы эффект срабатывал только один раз при монтировании компонента.
2. **Стиль фона**: Убедитесь, что путь к изображению правильный. Для доступа к файлам в папке `public`, просто используйте значение, начинающееся с `/`, как я показал в примере.
3. **Стили**: Я добавил стили `backgroundSize: 'cover'` и `backgroundPosition: 'center'`, чтобы изображение правильно отображалось в блоке.
4. **interval**: Теперь `setInterval` обновляет текст в зависимости от времени суток.

Запустите код, и фон должен корректно меняться в зависимости от времени суток.

Answer 2

Во-первых: зачем ты лезешь в dom руками через ref? Пиши в state и используя значение в свойстве style компонента. Или даже не в state а тупо в переменную. <br/> <br/> Во-вторых: чтобы сборщик обработал картинку из хрен пойми откуда - надо её импортировать через import и уже потом подставлять результат. <br/> Однако если картинка лежит в public, это не обязательно, можно прям на неё ссылаться от корня. Только посмотри где она действительно лежит: если лежит в <code>/public/img/morning.jpg</code> , то писать надо соответственно ' <code>/img/morning.jpg</code> без всяких assets и наоборот.