React Joyride

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: '关闭', last: '完成', next: '下一步', skip: '跳过' }}
      styles={{
        options: {
          primaryColor: '#2F54EB',
          textColor: '#000',
        },
      }}
      disableScrolling={true} // 禁用滚动
      showSkipButton={true} // 显示跳过按钮
      disableOverlayClose={true} // 禁用遮罩层关闭
      hideCloseButton={true} // 隐藏关闭按钮
      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) => {
    // 这里是为了只需要引导用户一次，把 run 存储到 localStorage 中
    dispatch({ type: 'app/setTourStatus', payload: status });
  }}
/>
...

想必大家看完后也注意到了 "防止闪烁" 这个注释，不知道各位是否在使用时也发现了这样一个小问题，那就是从第一步到第二步后，再返回第一步时页面会闪一下，就是元素会从左上角闪到目标元素位置。

简单修改一下，就能避免闪烁，给用户良好的使用体验😁