【React】漫游式引导
前言
项目中Antd版本较低，升级到有该组件的新版风险过于大，因为考虑到是老项目，不升级为上策（怕出啥幺蛾子），所以抽出为一个内部组件完成需求即可😎~
实践
Tour
const Tour = ({
visible,
step,
gap,
}) => {
const [posInfo, targetElement] = useTarget(
step.target,
open = visible,
gap
);
const content = step.content
return <>
{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>
</>
}效果
