我如何在ReactJ中使用ANTD滑动其他组件

Question

我是新手的反应，我有一个正在使用ANTD的抽屉组件的场景，而且效果很好，但是默认情况下，它打开了页面的弹出窗口（从顶部滑动），但是这里我的要求代替打开弹出窗口我想作为普通组件打开，并且具有切换按钮，如果关闭，则它会滑动（hide），如果切换在打开，则它会滑下，并且页面的其余部分也会滑动以使空间滑动为此。

请帮助我如何实现这一目标。

谢谢

Answer 1

我想自定义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>
  );
}

Answer 2

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

Answer 3

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;