如何在reactJs中使用antd向下滑动其他组件

Question

我是新手，我有一个场景，我使用的是antd的Drawer组件，它工作正常，但默认情况下它会打开页面的弹出窗口(从顶部滑动(，但这里我的要求是，我不想打开弹出窗口，我想作为普通组件打开，它有切换按钮，如果关闭，它会向上滑动(隐藏(，如果切换打开，它会向下滑动，页面的其余部分也向下滑动，为其腾出空间

请帮我怎样才能做到这一点。

感谢

Answer 1

这正是我想要的，但它没有抽屉解决方案，它对我有效。

Answer 2

import { Button } from 'antd';
import { useState } from 'react';
const Portal = ({ children }: any) => {
const [visible, setVisible] = useState(false);
return (
<div className='ant-drawer ant-drawer-top ant-drawer-open' style={{ position: 'static' }}>
{visible && (
<>
<div className='ant-drawer-content-wrapper' style={{ height: '378px', position: 'initial' }}>
<div className='ant-drawer-content'>
<div className='ant-drawer-wrapper-body'>
<div className='ant-drawer-header ant-drawer-header-close-only'>
<div className='ant-drawer-header-title'>
<button
type='button'
aria-label='Close'
className='ant-drawer-close'
onClick={() => setVisible(false)}
>
<span role='img' aria-label='close' className='anticon anticon-close'>
<svg
viewBox='64 64 896 896'
focusable='false'
data-icon='close'
width='1em'
height='1em'
fill='currentColor'
aria-hidden='true'
>
<path d='M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z' />
</svg>
</span>
</button>
</div>
</div>
<div className='ant-drawer-body' />
</div>
</div>
</div>
</>
)}
<Button type='primary' onClick={() => setVisible((prev) => !prev)}>
{visible ? 'Close' : 'Open'} Drawer
</Button>
{children}
</div>
);
};
function App() {
return (
<Portal>
{Array.from({ length: 20 }).map((_, index) => (
<h1 key={index}>Heading {index + 1}</h1>
))}
</Portal>
);
}
export default App;

Answer 3

我想定制antd抽屉会变得很复杂。

当抽屉可见时，你可以通过添加高度自动或以px为单位，当抽屉隐藏时，可以添加0px为单位

export function CustomDrawer() {
const [visible, setVisible] = useState(false);
return (
<div>
<div
style={{
height: visible ? "200px" : "0px",
transition: "2s",
overflow: "hidden",
}}
>
<p>drawer body</p>
</div>
<button
onClick={() => {
setVisible(!visible);
}}
>
click
</button>
</div>
);
}