如何在 react 我的项目中应用老手疏导性能呢?
在网上发现了几种插件，都挺不错的，最终还是抉择了 intro.js，上面介绍一下这个插件的具体用法
官网地址：https://introjs.com/

npm 装置

npm install intro.js --save

在我的项目中引入

能够在你的根目录中引入 css 款式

import "intro.js/introjs.css";

在组件中引入 intro.js

import IntroJs from "intro.js"

最简略的用法

 import React from 'react'
 import IntroJs from 'intro.js'
 import {Card, Tooltip, Button} from 'antd';
 
 class IntroPage extends React.Component {startIntro = () => {
            // 获取蕴含疏导元素的父容器, 并组成 IntroJs
            var intro1 = IntroJs(document.getElementById('root'))
            intro1.setOptions({
                prevLabel: "上一步",
                nextLabel: "下一步",
                skipLabel: "跳过",
                doneLabel: "完结",
            }).oncomplete(function () {// 点击跳过按钮后执行的事件}).onexit(function () {// 点击完结按钮后，执行的事件}).start();}

        // render
        // 要害是 data-step 和 data-intro
        render() {
            return (
                <div id='root'>
                    <Card bordered={true} style={{width: '100%'}} data-step="1" data-intro='开始疏导!'>
                        <Button onClick={() => this.startIntro()}> 开始疏导 </Button>
                    </Card>
                </div>
            );
        }
    }

    export default IntroPage

API

IntroJs Props

# Options Props

最初

插件挺好用的，就是格局比拟固定，但也能满足需要，也能够自定义款式去批改。