在 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/

在设置中放置一些指标，例如 AsyncStorage，然后检查它是否是第一次运行应用程序：

try {
  const value = await AsyncStorage.getItem('@isAppFirstTimeRunning');
  if (value !== 'true'){
    // not first time running
    ShowThePopUp();
  }
  else {
     AsyncStorage.setItem('@isAppFirstTimeRunning', 'true');
  }
} catch (error) {
  // Error retrieving data
}

是的，您可以在登录或登陆页面后立即添加弹出窗口。

在您的组件中，添加以下代码段

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'


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

componentWillMount() 是一个生命周期钩子，它将在呈现您关注的组件之前执行这组语句。

并且，检查所有可用于 React 的生命周期组件。