当前位置：首页 > React

react 实现引导效果

2026-01-27 02:51:14React

使用 react-tour 库实现引导效果

react-tour 是一个流行的 React 引导库，提供简单易用的 API 来创建用户引导。

安装 react-tour：

npm install react-tour

基本使用示例：

import { Tour } from 'react-tour';

const steps = [
  {
    selector: '#first-step',
    content: '这是第一步引导内容',
  },
  {
    selector: '.second-step',
    content: '这是第二步引导内容',
  }
];

function App() {
  const [isTourOpen, setIsTourOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsTourOpen(true)}>开始引导</button>
      <Tour
        steps={steps}
        isOpen={isTourOpen}
        onRequestClose={() => setIsTourOpen(false)}
      />
    </div>
  );
}

使用 react-joyride 创建交互式引导

react-joyride 是另一个功能丰富的引导库，支持更多自定义选项。

安装 react-joyride：

npm install react-joyride

基本实现代码：

import Joyride from 'react-joyride';

const steps = [
  {
    target: '#my-first-element',
    content: '这是第一个需要引导的元素',
  },
  {
    target: '.my-second-element',
    content: '这是第二个引导步骤',
    placement: 'bottom',
  }
];

function App() {
  const [run, setRun] = useState(false);

  return (
    <div>
      <button onClick={() => setRun(true)}>开始引导</button>
      <Joyride
        steps={steps}
        run={run}
        continuous={true}
        showProgress={true}
        showSkipButton={true}
        styles={{
          options: {
            primaryColor: '#f04',
          }
        }}
      />
    </div>
  );
}

自定义实现引导组件

对于简单需求，可以自行实现引导组件：

function Guide({ steps, currentStep, onNext, onPrev, onClose }) {
  if (currentStep >= steps.length) return null;

  const step = steps[currentStep];

  return (
    <div className="guide-overlay">
      <div className="guide-content">
        <div className="guide-arrow" style={{ [step.position]: '10px' }} />
        <p>{step.content}</p>
        <div className="guide-buttons">
          {currentStep > 0 && <button onClick={onPrev}>上一步</button>}
          <button onClick={onNext}>
            {currentStep === steps.length - 1 ? '完成' : '下一步'}
          </button>
          <button onClick={onClose}>跳过</button>
        </div>
      </div>
    </div>
  );
}