reactjs - Next js中组件的条件渲染

Question

我曾经通过编写类似这样的内容来根据屏幕宽度渲染组件。

function App(props) {
    const [mobile, setMobile] = useState(() => window.innerWidth < 576 ? true : false)
    return (
        <div>
            {
                mobile ? <ComponentA /> : <ComponentB />
            }
        </div >
    );
}

但现在我正在使用 Next.js，由于 window.innerWidth 引用，这给了我几个错误。我怎么能这样做？提前致谢。

Answer 1

您收到引用错误，因为您无法访问 window useState 中的对象.相反，您必须将 useState 中的初始值设置为 undefined或 null并使用 useEffect其中 window可引用来电setMobile(window.innerWidth < 576 ? true : false) .最后，在你的 render 方法中，你可以检查是否 mobile使用 setMobile 设置状态(即，不是 undefined 或 null )并使用定义的移动状态值(true 或 false )有条件地呈现您的 ComponentA 或 ComponentB。另外，您需要添加 window.addEventListener('resize', handleResize)当您的 App 组件被挂载并在它被卸载时将其删除，您也在 useEffect 中执行此操作因为那是您引用 window 的地方.否则，调整浏览器大小不会触发对 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
}