javascript - 渲染前如何清屏
问题描述
使用 react 开发实时墙板时发现问题。我以 3 秒的时间间隔依次显示 2 个组件 Dashboard1(一个包含数据的表)、Dashboard2(另一个包含数据的表)。我的父组件是 Dashboard,它连接到我的 Firestore DB 以接收实时更新并将此数据发送到 Dashboard1 组件,然后 Dashboard 1 呈现其数据,并在 3 秒后调用 Dashboard2,并使用 Dashboard 使用 props.history 传递给它的相同数据.push()。我在这里看到 2 个问题。组件 Dashboard 2 始终呈现在 Dashboard1 上方。就像我向下滚动页面时一样,我仍然可以在底部看到 Dashboard1。如何在渲染 Dashboard1 和 2 之前清除页面。这样我一次只能在屏幕上看到一个组件。下面是我的 App、Dashboard、Dashboard1 和 Dashboard2 的代码。我还看到控制台日志中多次呈现仪表板 2。请帮我解决这两个问题:
App.js:
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import Dashboard from './components/Dashboard'
import Dashboard1 from './components/Dashboard1'
import Dashboard2 from './components/Dashboard2'
class App extends Component {
render() {
console.log('App')
return (
<BrowserRouter>
<div className="App">
<Route exact path='/' component={Dashboard} />
<Route exact path='/Dashboard1' component={Dashboard1} />
<Route exact path='/Dashboard2' component={Dashboard2} />
<Dashboard />
</div>
</BrowserRouter>
)
}
}
export default(App)
Dashboard.js:
import React, { Component } from 'react';
import { BrowserRouter, Route, Redirect } from 'react-router-dom'
import Dashboard1 from './Dashboard1'
import Dashboard2 from './Dashboard2'
import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'
class Dasboard extends Component {
render() {
console.log('Dashboard')
const { agents } = this.props
if (!agents) {
return null
}
return (
<Dashboard1 data={agents}/>
)
}
}
const mapStateToProps = (state) => {
return {
agents: state.firestore.data.agent_groups
}
}
export default compose(
connect(mapStateToProps),
firestoreConnect([
{ collection: 'agent_groups' }
])
)(Dasboard)
Dashboard1.js:
import React from 'react'
import Table from '../layouts/Table'
import { withRouter } from 'react-router-dom'
const Dashboard1 = (props) => {
console.log('Dashboard1')
setTimeout(() => {
props.history.push({
pathname: '/Dashboard2',
state: { data: props.data.WFM_Inbound_Sales.agents }})
}, 3000);
return (
<div className="dashboard1">
<Table
data={props.data.WFM_Inbound_Sales.agents}
headers={[
{
name: 'Agent',
prop: 'name'
},
{
name: 'Total calls',
prop: 'InboundCalls'
}
]}
/>
</div>
)
}
export default withRouter(Dashboard1)
Dashboard2.js:
import React from 'react'
import Table from '../layouts/Table'
import { withRouter } from 'react-router-dom'
const Dashboard2 = (props) => {
console.log('Dashboard2')
setTimeout(() => {
props.history.push('/')
}, 3000);
return (
<div className="dashboard2">
<Table
data={props.location.state.data}
headers={[
{
name: 'Agent',
prop: 'name'
},
{
name: 'Status',
prop: 'state'
},
{
name: 'Time in status',
prop: 'TimeInCurrentState'
}
]}
/>
</div>
)
}
export default withRouter(Dashboard2)
解决方案
您需要使用 switch 它将只呈现给定集合的一个路由,如下所示
class App extends Component {
render() {
console.log('App')
return (
<BrowserRouter>
<div className="App">
<Switch>
<Route exact path='/' component={Dashboard} />
<Route exact path='/Dashboard1' component={Dashboard1} />
<Route exact path='/Dashboard2' component={Dashboard2} />
</Switch>
<Dashboard />
</div>
</BrowserRouter>
)
}
}
在此处查看文档
推荐阅读
- flutter - 有没有办法在颤振中创建应用程序目录之外的文件夹?
- python - 如何计算熊猫表中重复值的平均值?
- python - sqlalchemy 缓存导致 Flask REST API 中的错误响应
- sql - Oracle live 中“此处不允许约束规范”的可能解决方案
- javascript - Jquery:声明变量并在拆分后获取变量
- devops - 如何将 Gitlab 中的 CI_COMMIT_REF 与值列表进行比较?
- rust - 如何在 rust 中转义 \ 和其他特殊字符
- sql-server - 始终在端口 1433 上授予侦听器连接,无论指定侦听器端口
- salesforce - 在插入后和更新触发器后更新同一对象两次
- python-3.x - 我如何在python中打印出一个数字三角形?不允许使用任何字符串。只有算术运算