本文介绍了在反应应用程序中创建首次访问弹出窗口?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何为我的 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/
这篇关于在反应应用程序中创建首次访问弹出窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
