Ant-design 源码分析之数据展示（十四）Popover

Ant-design 源码分析之数据展示（十四）Popover

2021SC@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';
位置默认为top
Popover.defaultProps = {
    placement: 'top' as TooltipPlacement,trigger: 'hover',mouseEnterDelay: 0.1,mouseLeaveDelay: 0.1,overlayStyle: {
    },
};export default Popover;