在反应应用程序中创建首次访问弹出窗口? [英] Create a first visit popup in react application?

问题描述

如何为我的 React 应用程序创建首次访问弹出窗口?是否可以使用 react-popup 模块来实现?我在下面使用了这个模块，但它似乎不起作用.你能检查一下并告诉我这里有什么问题吗.

下面是我的主页:

import React, {Component} from 'react';导入'./HomePage.css';从'nuka-carousel'导入旋转木马；从'../../components/Header/Header.js'导入HeaderComponent；从'./decorators.js'导入{装饰器}；从'react-popup'导入弹出窗口导出默认类 HomePage 扩展组件 {重定向页面 = () =>{window.location = '#/dashboard';}componentWillMount(){Popup.alert('我的组件')}使成为() {var mixins = [Carousel.ControllerMixin];返回 (<div><div className='explore-button-container'><button id='exploreBtn' onClick={this.redirectPage}>探索</button>

<HeaderComponent id='header' location={this.props.location}/><旋转木马自动播放={真}自动播放间隔={3000}环绕={真}>//轮播内容</旋转木马>

);}}

解决方案

在 componentDidMount 中，您可以访问 localstorage 和 sessionStorage，如果这是第一次访问，您可以在其中设置标志.像这样:

class myComponent(){构造函数(){//在这里做一些事情}componentDidMount(){让访问 = localStorage["alreadyVisited"];如果(访问){this.setState({ viewPopup: false })//不查看弹出窗口} 别的 {//这是第一次localStorage["alreadyVisited"] = true;this.setState({ viewPopup: true});}使成为() {返回(<模态aria-labelledby='modal-label'自动对焦={假}样式={modalStyle}背景样式={背景样式}show={this.state.viewPopup}onHide={this.close}><div style={dialogStyle()} >我是弹出文本

</模态>);}}

这就是我用 Modal 解决的方法，但我相信你也可以用 Popup 来解决.如果您想在会话的每次第一次访问时查看弹出窗口，您可以使用 sessionStorage 而不是 localstorage.请记住，您必须设置样式.你可以在这里看到一个例子:https://react-bootstrap.github.io/react-overlays/

How do I make a first visit popup for my react application? Is it possible to implement using the react-popup module? I used this module below but it does not seem to work. Can you check and let me know what wrong here.

Below is my homepage:

import React, {Component} from 'react';
import './HomePage.css';
import Carousel from 'nuka-carousel';
import HeaderComponent from '../../components/Header/Header.js';
import {Decorators} from './decorators.js';
import Popup from 'react-popup'


export default class HomePage extends Component {
    redirectPage = () => {
    window.location = '#/dashboard';
}

componentWillMount(){
  Popup.alert('my component')
}

render() {
    var mixins = [Carousel.ControllerMixin];
    return (
        <div>
            <div className='explore-button-container'>
                <button id='exploreBtn' onClick={this.redirectPage}>Explore</button>
            </div>

            <HeaderComponent id='header' location={this.props.location}/>
            <Carousel
                autoplay={true}
                autoplayInterval={3000}
                wrapAround={true}>
                //Carousel Content
            </Carousel>
        </div>
    );
  }
 }

解决方案

In componentDidMount you cann Access the localstorage and the sessionStorage, where you can set a flag, if this is the first visit. something like this:

class myComponent(){
    constructor(){//do stuff here}
    componentDidMount(){
        let visited = localStorage["alreadyVisited"];
        if(visited) {
             this.setState({ viewPopup: false })
             //do not view Popup
        } else {
             //this is the first time
             localStorage["alreadyVisited"] = true;
             this.setState({ viewPopup: true});
        }
    render() {
        return(<Modal
                aria-labelledby='modal-label'
                autoFocus={false}
                style={modalStyle}
                backdropStyle={backdropStyle}
                show={this.state.viewPopup}
                onHide={this.close}>
                  <div style={dialogStyle()} >
                    I'm the Popup Text
                  </div>
                </Modal>);
     }
}

This is how i solved it with Modal, but I'm sure you can do it with Popup, too. If you want to view the Popup on every first visit of a session you can use the sessionStorage instead of the localstorage. Keep in mind that you have to set the styles. You can see an example here: https://react-bootstrap.github.io/react-overlays/

这篇关于在反应应用程序中创建首次访问弹出窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！