使用【Shepherd】实现页面引导

在 React 中，使用 Shepherd 引导与页面的 DOM 元素联系在一起，需要确保 Shepherd 可以正确找到并附加到相应的 DOM 元素。这通常通过在 React 组件的渲染过程中创建的元素上设置特定的类名或 ID 来实现。

一、基本使用

1、安装 Shepherd

npm install shepherd.js

2、创建 你的 Shepherd 引导组件

// ShepherdTour.js
import React, { useEffect, useRef } from 'react';
import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

const ShepherdTour = () => {
  const tour = useRef(null);

  useEffect(() => {
    tour.current = new Shepherd.Tour({
      defaults: {
        classes: 'shepherd-theme-arrows',
        scrollTo: true,
      },
    });

    tour.current.addStep({
      id: 'example-step-1',
      text: '这是一个示例步骤。这是你的标题。',
      attachTo: {
        element: '.example-title', // 将步骤附加到这个元素
        on: 'bottom', // 提示框显示在元素的底部
      },
      buttons: [
        {
          text: '下一步',
          action: tour.current.next, // 点击按钮后，进入下一步
        },
      ],
    });

    tour.current.addStep({
      id: 'example-step-2',
      text: '这是另一个示例步骤。点击开始按钮。',
      attachTo: {
        element: '.start-tour', // 将步骤附加到这个按钮
        on: 'top', // 提示框显示在按钮的顶部
      },
      buttons: [
        {
          text: '完成',
          action: tour.current.complete, // 点击按钮后，结束引导
        },
      ],
    });
  }, []);

  const startTour = () => {
    tour.current.start();
  };

  return (
    <div className="container">
      <h1 className="example-title">欢迎使用 Shepherd</h1>
      <button className="start-tour" onClick={startTour}>
        开始引导
      </button>
    </div>
  );
};

export default ShepherdTour;

 3、在主组件中引入 Shepherd 引导组件

// App.js
import React from 'react';
import ShepherdTour from './ShepherdTour';

const App = () => {
  return (
    <div className="App">
      <ShepherdTour />
    </div>
  );
};

export default App;

二、引导如何与页面DOM建立联系

在上面的代码中，DOM 元素通过 className 属性（例如 example-title 和 start-tour）来标识。Shepherd 使用这些类名来找到并附加到相应的 DOM 元素。

 1、attachTo 

        用来指定 Shepherd 提示框附加到哪个元素。例如

attachTo: {
  element: '.example-title', // 使用类名选择器
  on: 'bottom', // 提示框显示在元素的底部
}

你也可以使用其他选择器，如 ID 选择器：

attachTo: {
  element: '#example-id', // 使用ID选择器
  on: 'bottom', // 提示框显示在元素的底部
}

 2、分析

可以借助shepherd.js第三方库实现用用户引导，根据类名绑定到页面上的dom元素，并且该dom元素可以不在当前组件上。

• 引入 Shepherd：通过 import Shepherd from 'shepherd.js'; 引入 Shepherd 库，并引入样式。
• 创建引导：在 useEffect 中创建一个新的 Shepherd 引导实例，并添加步骤。每个步骤通过 attachTo 属性指定要附加到的 DOM 元素，该元素通过类名或 ID 来定位。
• 开始引导：创建一个 startTour 函数，当用户点击“开始引导”按钮时调用 tour.current.start() 开始引导。
• 主组件中使用：在 App 组件中引入 ShepherdTour 组件并使用。