Javascript 在反应中相互重叠的组分_Javascript_Css_Reactjs_Dom_React Router

Javascript 在反应中相互重叠的组分

javascript css reactjs dom

Javascript 在反应中相互重叠的组分,javascript,css,reactjs,dom,react-router,Javascript,Css,Reactjs,Dom,React Router,我正在React应用程序中呈现两个组件，它们应该在屏幕上一个接一个地显示。但它们是重叠的。而且布局也不是我所期望的那样。我无法找出原因。链接到实际项目：下面是我的主要组件App.js，它根据路由呈现导航栏、登录和注册组件 import React, { Fragment } from "react"; import "./App.css"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; im

我正在React应用程序中呈现两个组件，它们应该在屏幕上一个接一个地显示。但它们是重叠的。而且布局也不是我所期望的那样。我无法找出原因。链接到实际项目：

下面是我的主要组件App.js，它根据路由呈现导航栏、登录和注册组件

import React, { Fragment } from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Landing from "./components/layout/Landing";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";

const App = () => (
<Router>
<Fragment>
  <Navbar />

  <Switch>
    <Route exact path="/" component={Landing} />
    <Route exact path="/login" component={Login} />
    <Route exact path="/register" component={Register} />
  </Switch>
</Fragment>
</Router>
);

export default App;

您必须知道

Fragment

和

div

的区别，或者您似乎滥用它的任何包装元素

React中的一种常见模式是组件返回多个元素。片段允许您对子项列表进行分组，而无需添加 DOM的额外节点

只有在希望包装多个jsx以避免在DOM中再次呈现过多元素时，才应该使用它

考虑这一点：

// Component1
<Fragment>
 <h1>Test</h1>
</Fragment>

// Component2
<Fragment>
 <h1>Test 2</h1>
</Fragment>

// If you do this
<Component1 />
<Component2 />

// It'll end up actually like this:
<h1>Test</h1>
<h2>Test 2</h2>

目前，你如何调用你的页面是你用片段包装它

<Fragment>
 <h1>Test</h1>
 <ul>
   <li>list</li>
 </ul>
</Fragment>


试验

名单

而你的主管道似乎也被碎片包裹着

<Fragment>
<Nav />
<ComponentSample />
<Fragment>

DOM的结果如何？大概是这样的：

<nav>
 ...
</nav>

<html>
...
<body>
  <nav>
  <h1>Test</h1>
  <ul>
    <li>list</li>
  </ul>
  </body>
</html>


...
试验

名单

不应该是这样吗

<html>
<body>
  <nav>
  <div class="home"> // where "home" could be styled as a proper page
    <h1>Test</h1>
    <ul>
      <li>list</li>
    </ul>
  </div>
 </body>
</html>


//“主页”可以被设计成一个合适的页面
试验

名单

我认为css中存在一些问题，导航栏的位置是固定的，它导致了问题

我认为这与ReactJS无关，这似乎是css问题。重叠可能发生在

.navbar

的

位置：固定的。是的，事实上，这正是问题所在。现在已经修好了，非常感谢！是的，事实上我知道片段的用法，你能具体说明我是如何滥用片段的吗。就问题而言，这确实是因为立场：固定风格，非常感谢！
<Fragment>
<Nav />
<ComponentSample />
<Fragment>

<html>
...
<body>
  <nav>
  <h1>Test</h1>
  <ul>
    <li>list</li>
  </ul>
  </body>
</html>

<html>
<body>
  <nav>
  <div class="home"> // where "home" could be styled as a proper page
    <h1>Test</h1>
    <ul>
      <li>list</li>
    </ul>
  </div>
 </body>
</html>