React响应式Navbar组件问题：屏幕放大后需点击才切换组件

主要问题1：未监听窗口尺寸变化 #

你的screenwidth只在组件首次渲染时获取一次窗口宽度，当屏幕放大超过640px时，组件不会自动重新计算宽度，依然使用旧的宽度值进行判断，导致带菜单按钮的Res组件持续显示。

主要问题2：语法与类型匹配错误 #

• 你将数字类型的window.innerWidth与字符串'640'做比较，容易触发非预期的类型转换问题，应该直接用数字640进行比较。
• 三元运算符写法有误，第二个判断screenwidth>'640'?<NormalWidth/>:''缺少前置问号，且此处无需连续三元判断——只要宽度不小于640，直接渲染NormalWidth即可。

修复后的代码示例 #

import { useState, useEffect } from 'react'
import Res from './responsiveMenu/Res'
import NormalWidth from './navNormalwidth/NormalWidth'

const Navbar=()=>{
  const [click,setClick]=useState(true)
  // 将屏幕宽度存入状态，触发组件重新渲染
  const [screenWidth, setScreenWidth] = useState(window.innerWidth)

  // 监听窗口尺寸变化，实时更新宽度状态
  useEffect(() => {
    const updateWidth = () => {
      setScreenWidth(window.innerWidth)
    }
    window.addEventListener('resize', updateWidth)
    // 组件销毁时移除监听，避免内存泄漏
    return () => window.removeEventListener('resize', updateWidth)
  }, [])

  const navBtn=()=>{setClick(!click)}

  return(
    <>
      {screenWidth < 640 ? <Res btnF={navBtn} click={click}/> : <NormalWidth/>}
    </>
  )
}

export default Navbar

补充说明 #

• 通过useEffect绑定窗口resize事件，每次窗口尺寸变化时更新screenWidth状态，触发组件重新渲染，从而正确切换显示的导航组件。
• 简化了三元表达式逻辑，代码更简洁易读。
• 修正了数字与字符串的比较问题，避免类型转换引发的错误。

内容的提问来源于stack exchange，提问作者Ahmad Sayed