React实现Intro效果(基础简单)

本文主要是介绍React实现Intro效果(基础简单)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

下载：利用Intro.js实现简单的新手引导 

npm install intro.js --save

yarn add intro.js

第一步：在我们需要引导的页面引入

import introJs from 'intro.js';
import 'intro.js/introjs.css';  //css是下载成功后就有的

第二步：在组件页面

  const intro: any = useRef(null);useEffect(() => {const hasSeenIntro = localStorage.getItem('hasSeenIntro');  //在这里进行判断，判断是否已经引导过，如果是，则不再进行if (!hasSeenIntro) {intro.current = introJs();intro.current.setOptions({steps: [// 引导步骤配置{element: '.one', // 要引导的元素的选择器或DOM节点intro: '可以根据这里查看我们数据的数据', // 步骤的简要介绍position: 'right' // 引导框相对于目标元素的位置},{element: '.topMessage', // 要引导的元素的选择器或DOM节点intro: '这里可以查看信息以及其数据', // 步骤的简要介绍position: 'right' // 引导框相对于目标元素的位置},{element: '.three', // 要引导的元素的选择器或DOM节点intro: '点击这里可以跳转到对应页面', // 步骤的简要介绍position: 'right' // 引导框相对于目标元素的位置}],overlayOptions: {backgroundColor: 'rgba(128, 128, 128, 0.5)' // 设置背景颜色为灰色且透明},highlightClass: 'custom-highlight', // 自定义选中框的类名highlightPadding: 10, // 自定义选中框的内边距initialStep: 0 // 设置初始步骤为第一步（索引为0）});intro.current.start(); // 启动引导localStorage.setItem('hasSeenIntro', 'true'); // 记录用户已经执行过引导}}, []);

那么根据以上的示例，那么也相信我们在别的框架中也可以熟练的应用了。 

以上则是intro实现效果的一些简单的应用，那么，如果想知道更多，则可以去查看以下官网：

Install Intro.js | Intro.js Docs

这篇关于React实现Intro效果(基础简单)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---