在反应应用程序中创建首次访问弹出窗口？

Question

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

下面是我的主页：

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>
    );
  }
 }

Answer 1

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

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>);
     }
}

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