无法在反应应用程序中使用 Ant design 的抽屉

Question

我正在尝试将 Ant Design 的 Drawer 组件合并到我的 React 应用程序中，但由于某种原因，在检查页面时我无法打开抽屉甚至出现在源代码中。我可以在另一个项目中使用它，我注意到在另一个项目的package.json 文件中我有"antd": "^4.2.5"，而在我当前的package.json 中我有"antd": "^4.3.2"。但是，在更改版本后，我遇到了同样的问题。然后我实际上只是将另一个项目的代码复制到我当前的项目中，但无济于事。我已经删除了node_modules，我重新运行了npm install，此时我只是尝试渲染Ant Design 提供的基本Drawer 示例，但它根本没有渲染。

这是我的package.json 文件。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.3.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这是我的App 组件。除了 Ant Design 的 CSS 之外，我还删除了对其他组件和样式表的任何引用。

import React from 'react';
import {Drawer} from 'antd';
import "antd/dist/antd.css";

function App() {

  return (
    <div className="App">
      <Drawer
        title="Basic Drawer"
        placement="right"
        closable={false}
        onClose={()=>console.log('bruh')}
        visible={true}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
      <h1>React App</h1>
    </div>
  );
}

export default App;

与此同时，我可以合并其他内容，但我不知道为什么它不渲染。我在控制台或终端中也没有收到任何错误。

Answer 1

这肯定是现在antd 中的一个错误（版本4.3.2），要修复它只需使用getContainer={false} 或指定要渲染抽屉的container。

<Drawer
  title="Basic Drawer"
  placement="right"
  closable={false}
  onClose={() => console.log("bruh")}
  getContainer={false}
  visible={true}
>...</Drawer>