当前位置：首页 > React

react 实现web新手引导

2026-01-27 19:19:03React

React 实现 Web 新手引导

使用 react-joyride 库

react-joyride 是一个流行的 React 新手引导库，功能强大且易于定制。安装依赖：

npm install react-joyride

基本用法示例：

import Joyride from 'react-joyride';

const App = () => {
  const steps = [
    {
      target: '.first-element',
      content: '这是第一个需要引导的元素',
    },
    {
      target: '.second-element',
      content: '这是第二个需要引导的元素',
    },
  ];

  return (
    <div>
      <Joyride steps={steps} continuous={true} showSkipButton={true} />
      <button className="first-element">按钮 1</button>
      <div className="second-element">内容区域</div>
    </div>
  );
};

自定义样式和回调

可以通过 styles 属性自定义引导步骤的外观：

react 实现web新手引导

<Joyride
  steps={steps}
  styles={{
    options: {
      arrowColor: '#fff',
      backgroundColor: '#fff',
      overlayColor: 'rgba(0, 0, 0, 0.5)',
      textColor: '#333',
    }
  }}
  callback={(data) => {
    if (data.status === 'finished') {
      console.log('引导结束');
    }
  }}
/>

使用 driver.js 替代方案

driver.js 是另一个轻量级引导库，适合简单场景。安装依赖：

npm install driver.js

示例代码：

react 实现web新手引导

import { drive, Driver } from 'driver.js';
import 'driver.js/dist/driver.min.css';

const driver = new Driver();

const steps = [
  { element: '#first-element', popover: { title: '标题', description: '描述内容' } },
  { element: '.second-element', popover: { title: '标题 2', description: '描述内容 2' } },
];

driver.defineSteps(steps);
driver.start();

手动实现简单引导

对于极简需求，可以手动实现：

import { useState } from 'react';

const Guide = () => {
  const [step, setStep] = useState(0);
  const steps = [
    { target: 'guide-step-1', text: '第一步说明' },
    { target: 'guide-step-2', text: '第二步说明' },
  ];

  return (
    <div>
      {step < steps.length && (
        <div className="guide-overlay">
          <div className="guide-text">{steps[step].text}</div>
          <button onClick={() => setStep(step + 1)}>下一步</button>
        </div>
      )}
      <div id="guide-step-1">元素 1</div>
      <div id="guide-step-2">元素 2</div>
    </div>
  );
};