React Joyride 使用案例：

1. 組件封裝

import { useMemo, useState } from 'react';
import Joyride from 'react-joyride';

interface IProps {
  run: boolean;
  CLASS_CONTENT_LIST: { class: string; content: string }[];
  onSetStatus: any;
}

const Tour = (props: IProps) => {
  const { run = true, CLASS_CONTENT_LIST, onSetStatus } = props;
  const [isFirstStep, setIsFirstStep] = useState<boolean>(true); // 防止閃爍

  const steps = useMemo(() => {
    return CLASS_CONTENT_LIST.map((item, index) => {
      return {
        target: item.class,
        content: item.content,
        disableBeacon: index === 0 && isFirstStep ? true : false,
      };
    });
  }, [CLASS_CONTENT_LIST, isFirstStep]);

  const handleJoyrideCallback = ({ action }: any) => {
    if (action == 'next' && isFirstStep) {
      setIsFirstStep(false);
    }
    if (action == 'reset') {
      onSetStatus(false);
    }
  };

  return (
    <Joyride
      steps={steps}
      continuous={true}
      locale={{ back: '上一步', close: '關(guān)閉', last: '完成', next: '下一步', skip: '跳過(guò)' }}
      styles={{
        options: {
          primaryColor: '#2F54EB',
          textColor: '#000',
        },
      }}
      disableScrolling={true} // 禁用滾動(dòng)
      showSkipButton={true} // 顯示跳過(guò)按鈕
      disableOverlayClose={true} // 禁用遮罩層關(guān)閉
      hideCloseButton={true} // 隱藏關(guān)閉按鈕
      run={run}
      callback={handleJoyrideCallback}
    />
  );
};

export default Tour;

2. 使用

import Tour from '@/components/reactJoyride';
import { useDispatch, useSelector } from 'umi';

const dispatch = useDispatch();
const tourStatus = useSelector((state: any) => state.app.tourStatus);

...
<Tour
  run={tourStatus}
  CLASS_CONTENT_LIST={[
    { class: '.tour-class-first', content: '這里是第一步操作' },
    { class: '.tour-class-second', content: '這里是第二步操作' },
    { class: '.tour-class-third', content: '這里是第三步操作' },
  ]}
  onSetStatus={(status: boolean) => {
    // 這里是為了只需要引導(dǎo)用戶一次，把 run 存儲(chǔ)到 localStorage 中
    dispatch({ type: 'app/setTourStatus', payload: status });
  }}
/>
...

想必大家看完后也注意到了 "防止閃爍" 這個(gè)注釋，不知道各位是否在使用時(shí)也發(fā)現(xiàn)了這樣一個(gè)小問(wèn)題，那就是從第一步到第二步后，再返回第一步時(shí)頁(yè)面會(huì)閃一下，就是元素會(huì)從左上角閃到目標(biāo)元素位置。

簡(jiǎn)單修改一下，就能避免閃爍，給用戶良好的使用體驗(yàn)??