如何在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

最初

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