无法在 React 应用程序中使用 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>

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

Unable to use Ant design's Drawer in react app

drawer

reactjs

antd