react页面引导组件react-guide

以你之姓@ 2024-04-18 17:18 29阅读 0赞

*  源码地址：

[https://github.com/liuyangjike/react-guide][https_github.com_liuyangjike_react-guide]

参考网址：[https://juejin.im/post/5ca859ccf265da30b53ed07b][https_juejin.im_post_5ca859ccf265da30b53ed07b]

import React, { Component } from "react";
    import Guide from 'react-guide'
    class App extends Component {
      constructor () {
        super()
        this.state = {
          visible: false
        }
      }
      handleStart() {
        this.setState({
          visible: true
        })
      }
      handleCancel() {
        this.setState({
          visible: false
        })
      }
      render() {
        return (
          <div>
            <Guide 
              visible={this.state.visible} 
              onCancel={this.handleCancel.bind(this)} >
                <h1 data-step="1" data-tip='Hello World'>Step1</h1>
                <div data-step="3" data-tip='Welcome to use react-guide'>Step3</div>
                <h4 data-step="2" data-tip='react-guide is very easy' >Step2</h4>
                <div><span data-step="4" data-tip='Let start'>Step4</span></div>
          </Guide>
          <button onClick={this.handleStart.bind(this)}>start</button>
        </div>
        );
      }
    }
    export default App;

[https_github.com_liuyangjike_react-guide]: https://github.com/liuyangjike/react-guide
[https_juejin.im_post_5ca859ccf265da30b53ed07b]: https://juejin.im/post/5ca859ccf265da30b53ed07b

发表评论取消回复

表情：

评论列表（有 0 条评论，29人围观）

还没有评论，来说两句吧...

相关阅读

相关 react页面引导组件react-guide

* 源码地址： [https://github.com/liuyangjike/react-guide][https_github.com_liuyangjike_r...

以你之姓@/ 2024年04月18日 17:18/ 0 赞/ 30 阅读

相关 React懒加载长页面 - 动态渲染组件

背景长页面在前端开发中是非常常见的。例如下图中的电商首页，楼层数据来自运营人员在后台的配置，楼层数量是不固定的，同时每个楼层可能会依赖更多翻页数据。在这种情况下，如果一

旧城等待，/ 2023年01月17日 08:00/ 0 赞/ 110 阅读

相关关于react-redux影响组件页面渲染的问题

在没有使用react-redux前，我定义一个对象`state1`，然后通过按钮点击，试图修改此对象里的属性值`another`。 import React, {

旧城等待，/ 2022年11月30日 01:21/ 0 赞/ 241 阅读

相关懒加载 React 长页面 - 动态渲染组件

背景长页面在前端开发中是非常常见的。例如下图中的电商首页，楼层数据来自运营人员在后台的配置，楼层数量是不固定的，同时每个楼层可能会依赖更多翻页数据。在这种情况下，如果一

心已赠人/ 2022年10月15日 00:50/ 0 赞/ 201 阅读

相关 React实现步骤条引导

目录 1. 功能需求 2. 核心代码 3. 完整代码 4. 效果展示 1. 功能需求因项目需求要做一个类似于任务引导的功能，什么意思呢？

蔚落/ 2022年10月06日 00:59/ 0 赞/ 200 阅读

相关 Android引导页面的设计

Android引导页面的设计大部分的引导界面基本上都是千篇一律的，只要熟练掌握了一个，基本上也就没什么好说的了，要想实现应用程序只启动一次引导界面这样的效果，要使用Sh

男娘i/ 2022年09月28日 13:05/ 0 赞/ 155 阅读

相关 React之组件

1. 首先自己创建一个简单的项目，项目的名字自己起，这里创建的文件夹名为MyReact；里面包含文件夹src，用来存JSX代码；文件夹build，用来存React所需的js库

r囧r小猫/ 2022年07月10日 04:55/ 0 赞/ 191 阅读

相关 React之组件

组件组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），

淩亂°似流年/ 2022年04月16日 03:58/ 0 赞/ 242 阅读

相关 Android 引导页面开发模板

效果图： ![20190417135637560.gif][] 源码地址：[https://github.com/591774192/GuideActivity][h

r囧r小猫/ 2022年02月18日 11:45/ 0 赞/ 154 阅读

相关 react放大镜组件

放大镜效果图 ![放大镜效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

àì夳堔傛蜴生んèń/ 2021年09月21日 09:38/ 0 赞/ 580 阅读