React点击增加数字按钮计数正常但Modal弹窗不显示如何解决

核心故障原因 #

• JSX渲染语法错误：代码中写为< Modal />，开尖括号<和组件名Modal之间存在多余空格，JSX解析器无法将其识别为自定义组件，直接跳过了该段内容的渲染，这是Modal完全不出现的核心原因。
• 弹窗效果缺失原因：当前自定义的Modal组件仅返回了一个带modal类名的普通p标签，没有给.modal类配置弹窗对应的固定定位、层级、遮罩等样式，即使组件正常渲染，也不会呈现弹窗的视觉效果，会和普通页面文本混排。
• 其他不规范问题（不影响当前功能但建议修复）：
  • 计数state的更新函数拼写错误：定义时写为setCoutn，正确拼写应为setCount，当前因为定义和调用都用了错写所以计数功能暂时正常，后续维护极易触发bug
  • 计数p标签重复写了两次mt-5类名，属于冗余代码
  • 按钮点击事件写法冗余：onClick={()=>increase()}可直接简化为onClick={increase}

修复后可运行代码 #

import { useState } from 'react';

function App() {
  // 修正setCount拼写
  const [count, setCount] = useState(0)
  const [showModal, setShowModal] = useState(false)

  const increase = () => {
    setCount(count + 1)
    setShowModal(true)
  }

  return (
    <>
      {/* 去掉<和Modal之间的多余空格 */}
      {showModal && <Modal />}
      {/* 移除重复的mt-5类名 */}
      <p className="text-center mt-5 fs-5 count">{count}</p>
      <div className="btn-box">
        {/* 简化onClick写法 */}
        <button className="btn btn-outline-primary" onClick={increase}>increase</button>
      </div>
    </>
  );
}

const Modal = () => {
  return (
    // 基础弹窗遮罩+居中样式，可根据UI需求自行调整，也可将样式移到独立css文件
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      background: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <p className='modal' style={{
        background: '#fff',
        padding: '20px 40px',
        borderRadius: '8px'
      }}>Modal</p>   
    </div>
  )
}

注：如果需要实现点击遮罩关闭弹窗的效果，只需要给Modal外层遮罩div绑定点击事件，触发时将showModal状态设为false即可。

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