标签: react-aria

我正在学习 Next.js 进行 Web 开发，并且遇到了commerce，这是一个用 Next.js 编写的电子商务网站的样板。当我浏览代码时，我发现了使用React Aria来创建叠加层的Sidebar组件。

我想在自己的项目中使用这部分，因此编写了一个Overlay也使用该OverlayContainer组件的组件。

import { useRef } from 'react';

import {
    useOverlay,
    useModal,
    OverlayContainer
} from '@react-aria/overlays';

const Overlay = ({ className, children, open = false, onClose }) => {
    const ref = useRef(null);

    const { modalProps } = useModal();

    let { overlayProps } = useOverlay({ onClose: onClose, open: open, isDismissable: true }, ref);
    return (
        <OverlayContainer>
            <div
                {...overlayProps}
                {...modalProps}
                ref={ref}
            >
                {children}
            </div> …