返回

手把手创建基于React的前端UI库（七）-- 弹出层组件

前端

前言

大家好，欢迎来到手把手搭建基于React的前端UI库的第七篇文章。在本文中，我们将介绍如何创建弹出层组件PopOver。弹出层组件是一个非常有用的组件，它可以用于显示各种各样的信息，比如工具提示、模态对话框和下拉菜单。

创建弹出层组件

首先，我们需要创建一个新的React组件。为此，可以在命令行中运行以下命令：

npx create-react-app react-popover

这将创建一个名为react-popover的新项目。

接下来，我们需要在src目录中创建一个新的文件Popover.js。这个文件将包含我们的弹出层组件的代码。

在Popover.js文件中，我们需要导入React和一些必要的CSS类。

import React, { useState, useRef } from 'react';
import styles from './Popover.module.css';

接下来，我们需要定义我们的弹出层组件。该组件将接受一个children属性，该属性将是弹出层的内容。

const Popover = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef();

  const handleClick = (e) => {
    setIsOpen(!isOpen);
  };

  const handleOutsideClick = (e) => {
    if (ref.current && !ref.current.contains(e.target)) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleOutsideClick);
    return () => {
      document.removeEventListener('click', handleOutsideClick);
    };
  }, [isOpen]);

  return (
    <div className={styles.popover}>
      <button onClick={handleClick}>{children}</button>
      {isOpen && <div ref={ref} className={styles.popoverContent}>{children}</div>}
    </div>
  );
};

我们的弹出层组件现在已经完成了。接下来，我们需要将其导出，以便在其他地方使用它。

export default Popover;

使用弹出层组件

现在我们已经创建了弹出层组件，就可以在我们的应用程序中使用它了。

首先，我们需要在App.js文件中导入弹出层组件。

import Popover from './Popover';

接下来，我们需要将弹出层组件添加到我们的应用程序中。

const App = () => {
  return (
    <div>
      <h1>Popover</h1>
      <Popover>
        <p>This is a popover.</p>
      </Popover>
    </div>
  );
};

现在，当我们运行我们的应用程序时，我们将看到一个带有按钮的弹出层组件。当我们点击按钮时，弹出层将打开。

结语

在本篇文章中，我们介绍了如何创建弹出层组件PopOver。我们探讨了如何使用React Hooks和CSS来创建可重用的弹出层组件，它可以在您的应用程序中用于各种目的，例如工具提示、模态对话框和下拉菜单。

我希望这篇文章对您有所帮助。如果您有任何问题，请随时在评论区留言。

扩展阅读