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

Question

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

请帮助我如何实现。

谢谢

Answer 1

这正是我想要的，但它没有抽屉Solution，它适合我。

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>
  );
}

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

How I can Slide down other component using antd in reactJs

reactjs

antd