前端 - 使用antd/Modal但是不弹窗，请问是否有哪位大佬知道原因呢？

Question

使用antd/Modal
但是不弹窗，请问是否有哪位大佬知道原因呢？

import './App.css'
import { Card, Modal, Space,  } from 'antd'

function App() {
  
  const [modal, contextHolder] = Modal.useModal();

  const config = {
    title: 'Use Hook!',
    content: (
      <div>1w2e3rreqdw</div>
    ),
  };

  return (
    <>
     <button onClick={ () => {
      console.log('点击按钮')
      modal.info(config)
     }}>按钮</button>
    </>
  )
}

export default App

Answer 1

大概看了一下你的代码，你已经定义了 const [modal, contextHolder] = Modal.useModal();，但没有在 JSX 中使用 contextHolder。需要在返回的 JSX 中包含 {contextHolder}，这样 Modal 才能正常工作。

import './App.css';
import { Modal } from 'antd';

function App() {
  const [modal, contextHolder] = Modal.useModal();

  const config = {
    title: 'Use Hook!',
    content: (
      <div>1w2e3rreqdw</div>
    ),
  };

  return (
    <>
      <button onClick={() => {
        console.log('点击按钮');
        modal.info(config);
      }}>按钮</button>
      {contextHolder}
    </>
  );
}

export default App;

Answer 2

### 可能的原因及解决方案

1. **Modal 使用方式不正确**：
   - `Modal.useModal()` 返回的是一个包含 `showModal`, `destroy`, `update` 等方法的对象，而不是直接包含 `info` 方法的对象。`info` 方法是 `Modal` 组件自身的静态方法，不是通过 `useModal` 钩子返回的方法。

2. **修改代码以正确使用 Modal**：
   - 如果你想使用 `Modal.info`，可以直接调用它，而不需要通过 `useModal`。
   - 或者，如果你想使用 `useModal`，应该使用 `showModal` 方法来显示模态框，并传递配置对象。

### 修正后的代码

如果你希望继续使用 `useModal`：

import './App.css';
import { Card, Modal, Space, Button } from 'antd';

function App() {
const [modal] = Modal.useModal();

const openModal = () => {

modal.show({
  title: 'Use Hook!',
  content: <div>1w2e3rreqdw</div>,
  onOk: () => {
    console.log('OK');
  },
  onCancel: () => {
    console.log('Cancel');
  },
});

};

return (

<>
  <Button type="primary" onClick={openModal}>
    打开模态框
  </Button>
</>

);
}

export default App;

如果你希望使用 `Modal.info`：

import './App.css';
import { Card, Modal, Space, Button } from 'antd';

function App() {
const openInfoModal = () => {

Modal.info({
  title: 'Info Modal',
  content: <div>1w2e3rreqdw</div>,
  onOk() {
    console.log('Info Modal OK');
  },
});

};

return (

<>
  <Button type="primary" onClick={openInfoModal}>
    显示信息模态框
  </Button>
</>

);
}

export default App;

确保你根据实际需求选择正确的使用方式。如果仍然遇到问题，请检查是否有其他代码或样式影响了模态框的显示。