Question

我有一个react项目，该项目根据其路线呈现不同的组件。我的主要CSS定义为：

html, body, #root, #root>div {
  height: 100% !important;
    width:100% !important;
}

我的应用的高度和宽度在首次呈现时起作用（组件）。但是，当其他组件呈现（）时，应用程序的高度和宽度将不会更改/更新为浏览器的高度和宽度的最大值。

在下面的屏幕截图中，正如您在我的Google开发工具中看到的那样，根HTML的宽度和高度甚至都不是整个浏览器页面的大小。呈现此组件时。

https://i.imgur.com/OeCjb7o.png（由于声誉低下而无法发布图片！，请改为查看链接！）

任何帮助将不胜感激！

下面是我的应用程序中使用的index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="%PUBLIC_URL%/diamond.ico" />
    <link rel="stylesheet" href="https://video-react.github.io/assets/video-react.css" />
    <meta
      charset="utf-8"
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="/css/video-react.css" />
    <title>REACT APP</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

以下是App.js代码以及我如何处理路线：

// /client/App.js
import React, { Component } from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
// import SearchBar from './SearchBar';
import SummonerNew from './SummonerNew';
import Search from './Search';
import NavBar from './NavBar';
import Home from './Home';
// import ChampionControl from './ChampionControl';
import ChampionControlGG from './ChampionControlGG';
import Footer from './Footer';
import FreeRotation from './FreeRotation';
// import styles from './styles.css';
import { connect } from 'react-redux';

class App extends Component {
  render(){
    const { region , search } = this.props
    const App = ()=>(
      <div id="main-inner-wrap">
        <NavBar />
        <Search />
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route exact path='/home' component={Home}/>
          <Route path='/champions' component={ChampionControlGG}/>
          <Route path='/profile/:region/:id' component={SummonerNew}/>
          <Route path='/rotation' component={FreeRotation}/>
          <Route component={Home} />
        </Switch>
        <Footer/>
      </div>
    )
    return(
      <Switch>
        <App/>
      </Switch>
    )
  }
}

const mapStateToProps = (state) =>{
  return {
    region:state.menu.region,
    search:state.menu.search
  }
}

export default withRouter(connect(mapStateToProps)(App));

无法设置我的反应项目，使其宽度和高度成为内容的全部大小

0 个答案: