如何在react項(xiàng)目中使用新手引導(dǎo)功能呢?
在網(wǎng)上發(fā)現(xiàn)了幾種插件，都挺不錯(cuò)的，最終還是選擇了 intro.js ，下面介紹一下這個(gè)插件的具體用法
官網(wǎng)地址：https://introjs.com/

npm安裝

npm install intro.js --save

在項(xiàng)目中引入

可以在你的根目錄中引入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 = () => {
            // 獲取包含引導(dǎo)元素的父容器, 并組成IntroJs
            var intro1 = IntroJs(document.getElementById('root'))
            intro1.setOptions({
                prevLabel: "上一步",
                nextLabel: "下一步",
                skipLabel: "跳過",
                doneLabel: "結(jié)束",
            }).oncomplete(function () {
                //點(diǎn)擊跳過按鈕后執(zhí)行的事件
            }).onexit(function () {
                //點(diǎn)擊結(jié)束按鈕后， 執(zhí)行的事件
            }).start();
        }

        // render
        // 關(guān)鍵是data-step 和 data-intro
        render() {
            return (
                <div id='root'>
                    <Card bordered={true} style={{ width: '100%' }} data-step="1" data-intro='開始引導(dǎo)!'>
                        <Button onClick={() => this.startIntro()}>開始引導(dǎo)</Button>
                    </Card>
                </div>
            );
        }
    }

    export default IntroPage

API

IntroJs Props

image

Options Props

image

最后

插件挺好用的，就是格式比較固定，但也能滿足需求，也可以自定義樣式去修改。