условный рендеринг компонента в Next js

Question

Я использовал для рендеринга компонента в зависимости от ширины экрана, написав что-то вроде этого. функция App (props) {const [mobile, setMobile] = useState (() => window.innerWidth <576? true ...

reactjs next.js

1

Diego 13 Фев 2021 в 08:38

Answer 1

Вы получаете справочную ошибку, потому что не можете получить доступ к объекту windows в useState. Вместо этого вы должны установить начальное значение в useState на undefined или null и использовать useEffect, где на windows можно ссылаться для вызова setMobile(window.innerWidth < 576 ? true : false). наконец, в вашем методе рендеринга вы можете проверить, установлено ли состояние mobile, используя setMobile (т.е. не undefined или null), и использовать определенное значение мобильного состояния (либо true или false) для условного рендеринга ComponentA или ComponentB. Кроме того, вам необходимо добавить window.addEventListener('resize', handleResize), когда компонент вашего приложения смонтирован, и удалить его, когда он отключен, что вы также делаете в useEffect, поскольку именно там вы получаете ссылку на windows. В противном случае изменение размера браузера не приведет к обновлению состояния mobile. Вот рабочий пример:


import React, { useState, useEffect } from 'react'

function App() {
  const [mobile, setMobile] = useState(undefined)

  useEffect(() => {
    const updateMobile = () => {
      setMobile(window.innerWidth < 576 ? true : false)
    }

    updateMobile()
    window.addEventListener('resize', updateMobile)
    return () => {
      window.removeEventListener('resize', updateMobile)
    }
  }, [])

  return typeof mobile !== 'undefined' ? (
    mobile ? (
      <ComponentA />
    ) : (
      <ComponentB />
    )
  ) : null
}

0

kimbaudi 13 Фев 2021 в 07:29

Answer 2

Предположим, вы видите что-то вроде ReferenceError: window is not defined:

ReferenceError выбрасывается, когда ссылка на несуществующую переменную.

Это происходит потому, что в NextJS компоненты часто изначально визуализируются на стороне сервера с использованием NodeJS, а затем передаются клиентам для использования. Кроме того, в NodeJS нет такой вещи, как window - следовательно, window не определено .

К счастью, в таких случаях можно использовать typeof для безопасной проверки переменных перед попыткой их использования (см. этот ответ SO для дополнительной информации).

Ниже приведен практический пример.

const [mobile, setMobile] = useState(() => {
  if (typeof window === 'undefined') return false
  return window.innerWidth < 576
})

0

Arman Charan 13 Фев 2021 в 06:31

условный рендеринг компонента в Next js

2 ответа

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

Связанные вопросы

Новые вопросы

reactjs