无法在react应用程序中使用Ant design的Drawer

Question

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

这是我的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>