React-media query не работает с большим экраном при загрузке страницы при размещении на Netlify - PullRequest
Новая
       13

React-media query не работает с большим экраном при загрузке страницы при размещении на Netlify

0 голосов
/ 05 октября 2018

Я использую response-media v1.8.0 (https://github.com/ReactTraining/react-media) с Gatsby, и он отлично работает локально, но не работает так же, когда размещается на Netlify. У меня есть набор фотографий, которые должны быть наложены наменьшие экраны и должны быть сеткой на больших экранах. Как видно из этой ветки предварительного просмотра Netlify, под красным заголовком «Внеконкурсная подача» (https://5bb630aec965921b43c49c7b - art-show.netlify.com/), если вы загружаете сайт с шириной экрана> 768 пикселей, он не загружается должным образом, но если вы измените размер экрана <768 пикселей, а затем вернулись к> 768 пикселей, он загружается правильно. Я не уверен, почему естьпроблема при начальной загрузке для больших экранов.

Вот как я использую реагирующий носитель. В моем render (): 

staffImages = (
  (photos).map((photo, i) => {

    let photoMobileURL = photo.url.replace(new RegExp("(.*)" + 'lg'), "$1sm");

    return (
      <Media query={{ maxWidth: 768 }}>
        {matches =>
          matches ? (
            <GridPhotoContainer>
              <Photo
                className="Photo"
                backgroundImage={photoMobileURL}
                openModal={() => this.openModal(i, false, true)}
              />
            </GridPhotoContainer>
          ) : (
              <Photo
                className="Photo"
                backgroundImage={photo.url}
                openModal={() => this.openModal(i, false, true)}
              />
            )
        }
      </Media>
    )
  })
)

renderStaffImages = (
  <Media query="(max-width: 768px)">
    {matches =>
      matches ? (
        <Grid className="Grid">
          {staffImages}
        </Grid>
      ) : (
          <Grid className="Grid" marginTop="3em">
            {staffImages}
          </Grid>
        )
    }
  </Media>
)

тогда я возвращаю {renderStaffImages} в компонентевозврат заявления.

1 Ответ

0 голосов
/ 05 октября 2018

Как минимум, в вашем списке компонентов должно быть уникальное назначение key, которое создается при построении коллекций элементов с использованием map().Кроме того, для повышения производительности вы должны просто решить, какой тип коллекции возвращать, основываясь на параметре, а не проверять медиа-запрос в цикле, который может иметь плохие побочные эффекты.

Попробуйте что-то вроде 

staffImages = (small) => {
  const photoURL = small ? photo.url.replace(new RegExp("(.*)" + 'lg'), "$1sm") : `${photo.url}`;
  return (photos).map((photo, i) => small ? (
    <GridPhotoContainer key={i}>
      <Photo
        className="Photo"
        backgroundImage={photoURL}
        openModal={() => this.openModal(i, false, true)}
      />
    </GridPhotoContainer>
  ) : (
    <Photo
      key={i}
      className="Photo"
      backgroundImage={photoURL}
      openModal={() => this.openModal(i, false, true)}
    />
    )
  )
} 

renderStaffImages = (
  <Media query="(max-width: 768px)">
    {matches => (
        <Grid className="Grid" marginTop={matches ? '0' : '3em'}>
          {staffImages(matches)}
        </Grid>
      )
    }
  </Media>
)
...