【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>
    </>
}

效果