在 ReactJS 中,如何在一定时间后从一个屏幕切换到另一个屏幕?
How to switch from one screen to another after a certain time in ReactJS?
我是 ReactJS 的新手,想实现以下逻辑:我的应用程序中有一个介绍屏幕,几秒钟后我需要将介绍屏幕与主页交换。
我该怎么做?
我在两个单独的组件中同时拥有介绍屏幕和主页,并且我使用的是 React Router。
我一直在考虑使用 SetTimeOut
来更改我的组件,但我不知道如何在组件之间使用它。
这是我的 App.js 代码:
import React, {Component} from 'react';
import './App.css';
import {Route, Switch} from 'react-router-dom';
import Intro from './components/Intro';
import Home from './components/Home';
import Work from './components/Work';
import About from './components/About';
import Carrers from './components/Carrers';
import Contact from './components/Contact';
class App extends Component {
constructor(){
super()
}
render() {
return (
<React.Fragment>
<Switch>
<Intro path= "/" exact component={Intro}/>
<Route path= "/home" exact component={Home} />
<Route path= "/about" exact component={About} />
<Route path= "/work" exact component={Work} />
<Route path= "/carrers" exact component={Carrers} />
<Route path= "/contact" exact component={Contact} />
</Switch>
</React.Fragment>
);
}
}
export default App;
你能告诉我正确的方法吗?
你的介绍组件可以是这样的
class Intro extends React.Component {
componentDidMount() {
setTimeout(() => {
this.props.history.push('/home')
}, 5000) // render for 5 seconds and then push to home
}
render() {
return <h1>render for 5 seconds and then push to home</h1>
}
}
请参考这个问题:
基本上,您将从道具中获取历史记录,并将使用它来推送到新路线。
const { history } = this.props;
history.push('/new-location')
如果你没有在你的道具中看到它,因为它不是你路线中的组件,你将需要使用来自 'react-router-dom'.
的 withRouter
import { withRouter } from 'react-router-dom';
export default withRouter(Component);
我是 ReactJS 的新手,想实现以下逻辑:我的应用程序中有一个介绍屏幕,几秒钟后我需要将介绍屏幕与主页交换。
我该怎么做?
我在两个单独的组件中同时拥有介绍屏幕和主页,并且我使用的是 React Router。
我一直在考虑使用 SetTimeOut
来更改我的组件,但我不知道如何在组件之间使用它。
这是我的 App.js 代码:
import React, {Component} from 'react';
import './App.css';
import {Route, Switch} from 'react-router-dom';
import Intro from './components/Intro';
import Home from './components/Home';
import Work from './components/Work';
import About from './components/About';
import Carrers from './components/Carrers';
import Contact from './components/Contact';
class App extends Component {
constructor(){
super()
}
render() {
return (
<React.Fragment>
<Switch>
<Intro path= "/" exact component={Intro}/>
<Route path= "/home" exact component={Home} />
<Route path= "/about" exact component={About} />
<Route path= "/work" exact component={Work} />
<Route path= "/carrers" exact component={Carrers} />
<Route path= "/contact" exact component={Contact} />
</Switch>
</React.Fragment>
);
}
}
export default App;
你能告诉我正确的方法吗?
你的介绍组件可以是这样的
class Intro extends React.Component {
componentDidMount() {
setTimeout(() => {
this.props.history.push('/home')
}, 5000) // render for 5 seconds and then push to home
}
render() {
return <h1>render for 5 seconds and then push to home</h1>
}
}
请参考这个问题:
基本上,您将从道具中获取历史记录,并将使用它来推送到新路线。
const { history } = this.props;
history.push('/new-location')
如果你没有在你的道具中看到它,因为它不是你路线中的组件,你将需要使用来自 'react-router-dom'.
的 withRouterimport { withRouter } from 'react-router-dom';
export default withRouter(Component);