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 适合复杂场景，而自定义实现或轻量级库适合简单需求。
