Ant-design 源码分析之数据展示（十四）Popover
SC@SDUSC
Popover功能实现参见Tooltip
一、组件结构
1、ant代码结构
2、组件结构
ant中Popover的index.tsx中引入了Tooltip
二、antd组件调用关系
1、index.tsx
导入相应模块以及相应的ICON图标
import * as React from 'react';import Tooltip, {AbstractTooltipProps, TooltipPlacement } from '../tooltip';import {ConfigContext } from '../config-provider';import {getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';import {getTransitionName } from '../_util/motion';
声明PopoverProps接口
export interface PopoverProps extends AbstractTooltipProps {title?: React.ReactNode | RenderFunction;content?: React.ReactNode | RenderFunction;}
content：卡片内容，类型为ReactNode | () => ReactNode
title：卡片标题，类型为ReactNode | () => ReactNode
const Popover = React.forwardRef<unknown, PopoverProps>(({prefixCls: customizePrefixCls, title, content, ...otherProps }, ref) => {设置风格const {getPrefixCls } = React.useContext(ConfigContext);const getOverlay = (prefixCls: string) => (<>{title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}<div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div></>);const prefixCls = getPrefixCls('popover', customizePrefixCls);const rootPrefixCls = getPrefixCls();return (<Tooltip{...otherProps}prefixCls={prefixCls}ref={ref as any}overlay={getOverlay(prefixCls)}transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}/>);},);
Popover.displayName = 'Popover';位置默认为topPopover.defaultProps = {placement: 'top' as TooltipPlacement,trigger: 'hover',mouseEnterDelay: 0.1,mouseLeaveDelay: 0.1,overlayStyle: {},};export default Popover;
