无法在react应用中使用Ant设计的抽屉

Question

我正在尝试将Ant Design的Drawer组件合并到我的React App中，但是由于某些原因，在检查页面时，我无法打开Drawer甚至在源代码中显示它。我可以在另一个项目中使用它，并且在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>