React Media Query требует refre sh, чтобы показать изображение - PullRequest
Новая
       81

React Media Query требует refre sh, чтобы показать изображение

2 голосов
/ 21 марта 2020

Я использую реагирующую среду (https://github.com/ReactTraining/react-media) для работы с экранами разных размеров.

Цель использования реагирующей среды:
Просто большие экраны должны видеть изображение параллакса (используя материализацию CSS для параллакса).

Проблема:
Если вы измените размер окна, изображение исчезнет (как и должно быть), и когда вы вернетесь go к большему экрану, место изображения будет белым. После обновления страницы изображение снова появляется. Я заметил, что это происходит каждый раз, когда я использую медиа и javascript материализует CSS «пакет».

Как я могу это исправить? 

import React, { useLayoutEffect } from "react";
import picture from "../../image/Introduction.jpeg";
import Media from "react-media";

const Paralaxes = () => {
  useLayoutEffect(() => {
    const M = window.M;
    const elems = document.querySelectorAll(".parallax");
    M.Parallax.init(elems, {});
  });

  return (
    <Media query={{ minWidth: 768 }}>
      {matches =>
        matches ? (
          <div className="parallax-container">
            <div className="parallax">
              <img src={picture} className="responsive-img" alt="background" />
            </div>
          </div>
        ) : (
          <div className="container">
            <div className="divider black" />
          </div>
        )
      }
    </Media>
  );
};

export default Paralaxes;

Большое спасибо!

1 Ответ

1 голос
/ 23 марта 2020

Не уверен, как вы могли бы исправить этот один главный (я не использую медиа-запрос React). BUUUUUUUT, вы могли бы использовать классы hide materialize- css. Пример: 

  <div class="hide-on-small-only">Ayooo u can't see me if ur small lol</div>

Тег «div» будет скрыт на экранах небольших размеров. Вы можете увидеть это в документации Материализации Здесь . Прокрутите вниз до «Скрытие / Отображение содержимого».

Я знаю, что это не решит вашу проблему с React Media Query, но я увидел, что вы используете materialize- css, поэтому я подумал, почему бы не поделиться этим более простым Альтернатива.

Надеюсь, это поможет.

...