说明

Tooltip 和 Popconfirm 是 antd 关于操作反馈&提示的工具组件

• Tooltip 文字提示：https://ant.design/components/tooltip-cn/
• Popconfirm 是antd 的操作确认框：https://ant.design/components/popconfirm-cn/

这里主要介绍如何在 React 实现同样能力的 UI 组件（或者无物料）

Tooltip 和 Popconfrm 源码

照葫芦画瓢，先去看了下两者的源码，发现 Popconfirm 依赖 Tooltip，而 Tooltip 又依赖了 RCTooltip

• 源码地址

  return (
    <RcTooltip
      {...props}
      prefixCls={prefixCls}
      overlayClassName={customOverlayClassName}
      getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
      ref={ref}
      builtinPlacements={getTooltipPlacements()}
      overlay={getOverlay()}
      visible={tempVisible}
      onVisibleChange={onVisibleChange}
      onPopupAlign={onPopupAlign}
      overlayInnerStyle={formattedOverlayInnerStyle}
      arrowContent={<span className={`${prefixCls}-arrow-content`} style={arrowContentStyle} />}
    >
      {tempVisible ? cloneElement(child, { className: childCls }) : child}
    </RcTooltip>
  );

rc-tooltip

rc-tooltip 是社区非常受欢迎的 Raect 提示工具组件：https://www.npmjs.com/package/rc-tooltip

基本使用

var Tooltip = require('rc-tooltip');
var React = require('react');
var ReactDOM = require('react-dom');

// By default, the tooltip has no style.
// Consider importing the stylesheet it comes with:
// 'rc-tooltip/assets/bootstrap_white.css'

ReactDOM.render(
  <Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
    <a href="#">hover</a>
  </Tooltip>,
  container
);

主要关注几个 props

• placement

弹框弹出的方向

• trigger

触发的方式

• overlay

弹窗内容，类型是 React.ElementType

关于样式

tooltip 内置了一个默认的样式，可以基于这个样式 classname 重写，或者是通过 props 传入 classname 和 style

封装 rc-tooltip 成 popconfirm

基础

props 参照了 antd 的props，内部渲染的还是 rc-tooltip

const PopConfirm: React.FC<{
    children?: JSX.Element;
    title?: string;
    desc?: string;
    onCancel?: React.MouseEventHandler;
    onConfirm?: React.MouseEventHandler;
    cancelText?: string;
    confirmText?: string;
}> = props => {
    if (!props.children) {
        return null;
    }

    return (
        <RCToolTip
            trigger={['click']}
            placement="top"
            overlayClassName={styles.popWrap}
            overlay={<PopTipComp {...props} />}
        >
            <div>{props.children}</div>
        </RCToolTip>
    );
};

封装 overlay

下面是参照 antd 的一个 overlay 简单写的

const PopTipComp: React.FC<{
    title?: string;
    desc?: string;
    onCancel?: React.MouseEventHandler;
    onConfirm?: React.MouseEventHandler;
    cancelText?: string;
    confirmText?: string;
}> = ({ title, desc, onCancel, onConfirm, cancelText, confirmText }) => {
    return (
        <>
            <span className={styles.popTitle}>{title}</span>
            <span className={styles.popDesc}>{desc}</span>
            <hr className={styles.popDivider} />
            <div className={styles.popActionWrap}>
                <button className={styles.btn} onClick={onCancel}>
                    {cancelText}
                </button>
                <button className={styles.btn} onClick={onConfirm}>
                    {confirmText}
                </button>
            </div>
        </>
    );
};

使用 popconfirm

<PopConfirm
  title={'确认删除?'}
  desc={'删除后不可恢复'}
  confirmText={'ok'}
  cancelText={'cancel'}
  onConfirm={handleConfirm}
  onCancel={handleCancel}
>
  <span>test text</span>
</PopConfirm>

最终效果

代码仓库

• https://github.com/postbird/react-component-popconfirm