Получите отзывчивый реквизит для любых компонентов в NextJs - PullRequest
Новая
       71

Получите отзывчивый реквизит для любых компонентов в NextJs

1 голос
/ 26 апреля 2020

В моем приложении Next Js есть код для обнаружения userAgent . Что совершенно нормально для следующих Js страниц. Но когда мне нужно вызвать эту отзывчивую isMobile опору для компонентов (например: нижний колонтитул, верхний колонтитул, навигация), что мне делать? 

// index.js

IndexPage.getInitialProps = ({ req }) => {
  let userAgent;
  if (req) { // if you are on the server and you get a 'req' property from your context
    userAgent = req.headers['user-agent'] // get the user-agent from the headers
  } else {
    userAgent = navigator.userAgent // if you are on the client you can access the navigator from the window object
  }

  let isMobile = Boolean(userAgent.match(
    /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
  ))

  return { isMobile }
}

Теперь я могу получить доступ к isMobile реквизит, который вернет либо истину, либо ложь 

const IndexPage = ({ isMobile }) => {
  return ( 
    <div>
     {isMobile ? (<h1>I am on mobile!</h1>) : (<h1>I am on desktop! </h1>)} 
    </div>
  )
}

1 Ответ

1 голос
/ 26 апреля 2020

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

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

, но если, например, вы щелкнете ссылку в нижнем колонтитуле и отобразите другой компонент, который агент не будет обновлять.

...