Question

使用react开发实时墙板时看到问题。我将以3秒的时间间隔依次显示两个组件Dashboard1（一个包含数据的表），Dashboard2（另一个包含数据的表）。我的父组件是Dashboard，它连接到我的Firestore数据库以接收实时更新，并将此数据发送到Dashboard1组件，然后Dashboard 1呈现其数据，并在3秒后调用Dashboard2，并使用props.history将Dashboard传递给它的相同数据.push（）。我在这里看到2个问题。组件Dashboard 2始终呈现在Dashboard1上方。就像我向下滚动页面一样，我仍然可以在底部看到Dashboard1。如何在渲染Dashboard1和Dashboard 2之前清除页面。所以我一次只能在屏幕上看到一个组件。下面是我的App，Dashboard，Dashboard1和Dashboard2的代码。我还看到了Dashboard 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)

Answer 1

您需要使用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>
    )
  }
}

检查文档here

渲染前如何清除屏幕

1 个答案: