React中使用Ant Design Modal组件失效问题排查求助

针对你的代码和问题，按以下步骤逐一排查：

• 确认Ant Design样式已正确引入
  Ant Design组件依赖官方样式文件才能正常渲染和交互：

  • 若使用Ant Design v5，在项目入口文件（如index.js/main.jsx）中添加：

    import 'antd/dist/reset.css';
    

  • 若使用Ant Design v4，添加：

    import 'antd/dist/antd.css';
    

  未引入样式会导致Modal无法正确显示或交互失效。

• 检查React版本兼容性
  Ant Design v5要求React版本≥17.0.0，v4要求≥16.9.0。运行以下命令查看当前React版本：

  npm list react
  

  版本不兼容会引发组件渲染异常。

• 确保代码处于函数组件/自定义Hook内
  React.useState只能在函数组件或自定义Hook中调用，你的代码片段必须包裹在函数组件中，示例如下：

  import React from 'react';
  import { Button, Modal } from 'antd';
  
  const MyComponent = () => {
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    
    const showModal = () => {
      setIsModalOpen(true);
    };
    const handleOk = () => {
      setIsModalOpen(false);
    };
    const handleCancel = () => {
      setIsModalOpen(false);
    };
  
    return (
      <>
        <Button type="primary" onClick={showModal}>
          Open Modal
        </Button>
        <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </>
    );
  };
  
  export default MyComponent;
  

• 查看浏览器控制台错误
  打开浏览器开发者工具（F12）的Console面板，检查是否有报错信息（如未定义变量、模块加载失败等），这些错误通常能直接定位问题。

• 确认React导入（针对旧版构建环境）
  若你的项目使用React 16.x或更早版本，必须在组件顶部导入React：

  import React from 'react';
  

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