前言

项目中Antd版本较低，升级到有该组件的新版风险过于大，因为考虑到是老项目，不升级为上策（怕出啥幺蛾子），所以抽出为一个内部组件完成需求即可😎~

实践

Tour

const Tour = ({visible,step,gap,
}) => {const [posInfo, targetElement] = useTarget(step.target,open = visible,gap);const content = step.contentreturn <>{visible && <Mask visible={visible} pos={posInfo} />}<Popover content={content} trigger="click" open={visible} arrowPointAtCenter><PortalWrapper visible={visible}>{() => visible && <div style={{...(posInfo || CENTER_PLACEHOLDER),position: 'fixed',pointerEvents: 'none',}} key={JSON.stringify(posInfo)} />}</PortalWrapper></Popover></>
}

效果