React如何写popover

React 实现 Popover 的方法

使用 Material-UI 的 Popover 组件

Material-UI 提供了现成的 Popover 组件，可以直接使用。需要安装 @mui/material 和 @emotion 相关依赖。

import React from 'react';
import Popover from '@mui/material/Popover';
import Button from '@mui/material/Button';

function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <div style={{ padding: '16px' }}>
          This is the content of the Popover.
        </div>
      </Popover>
    </div>
  );
}

export default BasicPopover;

使用自定义组件实现 Popover

如果需要完全自定义 Popover，可以通过状态管理和 CSS 定位实现。

import React, { useState, useRef } from 'react';

function CustomPopover() {
  const [isOpen, setIsOpen] = useState(false);
  const anchorRef = useRef(null);

  const togglePopover = () => {
    setIsOpen(!isOpen);
  };

  const closePopover = () => {
    setIsOpen(false);
  };

  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <button ref={anchorRef} onClick={togglePopover}>
        Toggle Popover
      </button>
      {isOpen && (
        <div
          style={{
            position: 'absolute',
            top: '100%',
            left: 0,
            backgroundColor: 'white',
            border: '1px solid #ddd',
            padding: '8px',
            borderRadius: '4px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
            zIndex: 1000,
          }}
        >
          <div>Custom Popover Content</div>
          <button onClick={closePopover}>Close</button>
        </div>
      )}
    </div>
  );
}

export default CustomPopover;

使用 Reactstrap 的 Popover 组件

Reactstrap 是 Bootstrap 的 React 实现，也提供了 Popover 组件。

import React, { useState } from 'react';
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';

function ReactstrapPopover() {
  const [popoverOpen, setPopoverOpen] = useState(false);

  const toggle = () => setPopoverOpen(!popoverOpen);

  return (
    <div>
      <Button id="Popover1" type="button">
        Launch Popover
      </Button>
      <Popover
        placement="bottom"
        isOpen={popoverOpen}
        target="Popover1"
        toggle={toggle}
      >
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>Popover content goes here.</PopoverBody>
      </Popover>
    </div>
  );
}

export default ReactstrapPopover;

使用第三方库 react-tiny-popover

react-tiny-popover 是一个轻量级的 Popover 库，适合简单场景。

import React, { useState } from 'react';
import { Popover } from 'react-tiny-popover';

function TinyPopover() {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);

  return (
    <Popover
      isOpen={isPopoverOpen}
      positions={['bottom', 'top', 'left', 'right']}
      content={<div style={{ padding: '8px' }}>Popover Content</div>}
    >
      <button onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
        Click Me
      </button>
    </Popover>
  );
}

export default TinyPopover;

注意事项

• 定位问题：Popover 的定位需要根据触发元素的位置动态调整，避免超出视口。
• 事件处理：点击 Popover 外部时通常需要关闭 Popover，可以通过监听全局点击事件实现。
• 无障碍支持：确保 Popover 的触发元素和内容有正确的 ARIA 属性，例如 aria-haspopup 和 aria-expanded。

以上方法可以根据项目需求选择，Material-UI 和 Reactstrap 适合复杂场景，而自定义实现或轻量级库适合简单需求。