Компоненты перекрывают друг друга в React - PullRequest
Новая
       0

Компоненты перекрывают друг друга в React

2 голосов
/ 04 февраля 2020

Я рендерил 2 компонента в своем приложении React, которые должны отображаться один за другим на экране. Но они перекрываются. Кроме того, макет также не так, как я ожидал, см. Фото ошибки . Я не могу выяснить причину. Ссылка на реальный проект: https://evening-coast-59870.herokuapp.com/register

Вот мой основной компонент Приложение. js, который отображает компоненты Navbar, Login и Register согласно маршруту. 

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;

Регистрация. js: 

import React, { Fragment } from "react";
import { Link } from "react-router-dom";
const Register = () => {
return (
<Fragment>
  <h1 className="large text-primary">Sign Up</h1>
  <p className="lead">
    <i className="fas fa-user"></i> Create Your Account
  </p>
  <form className="form" action="create-profile.html">
    <div className="form-group">
      <input type="text" placeholder="Name" name="name" required />
    </div>
    <div className="form-group">
      <input type="email" placeholder="Email Address" name="email" />
      <small className="form-text">
        This site uses Gravatar so if you want a profile image, use a
        Gravatar email
      </small>
    </div>
    <div className="form-group">
      <input
        type="password"
        placeholder="Password"
        name="password"
        minLength="6"
      />
    </div>
    <div className="form-group">
      <input
        type="password"
        placeholder="Confirm Password"
        name="password2"
        minLength="6"
      />
    </div>
    <input type="submit" className="btn btn-primary" value="Register" />
  </form>
  <p className="my-1">
    Already have an account? <Link to="/login">Sign In</Link>
  </p>
</Fragment>
);
};
export default Register;

Вход. js

import React from "react";

const Login = () => {
return (
<div>
  <b>Login</b>
</div>
);
};
export default Login;

Основной CSS файл Приложение. css

/* Global Styles */
:root {
--primary-color: #17a2b8;
--dark-color: #343a40;
--light-color: #f4f4f4;
--danger-color: #dc3545;
--success-color: #28a745;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: "Raleway", sans-serif;
font-size: 1rem;
line-height: 1.6;
background-color: #fff;
color: #333;
}

a {
color: var(--primary-color);
text-decoration: none;
}

ul {
list-style: none;
}

img {
width: 100%;
}

/* Utilities */
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
padding: 0 2rem;
margin-top: 6rem;
margin-bottom: 3rem;
}

/* Text Styles*/
.x-large {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 1rem;
}

.large {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 1rem;
}

.lead {
font-size: 1.5rem;
margin-bottom: 1rem;
}

.text-center {
text-align: center; 
}

.text-primary {
color: var(--primary-color);
}

.text-dark {
color: var(--dark-color);
}

/* Padding */
.p {
padding: 0.5rem;
}
.p-1 {
padding: 1rem;
}
.p-2 {
padding: 2rem; 
}
.p-3 {
padding: 3rem;
}
.py {
padding: 0.5rem 0;
}
.py-1 {
padding: 1rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}

/* Margin */
.m {
margin: 0.5rem; 
}
.m-1 {
margin: 1rem;
}
.m-2 {
margin: 2rem;
}
.m-3 {
margin: 3rem;
}
.my {
margin: 0.5rem 0;
}
.my-1 {
margin: 1rem 0;
}
.my-2 {
margin: 2rem 0;
}
.my-3 {
margin: 3rem 0;
}

.btn {
display: inline-block;
background: var(--light-color);
color: #333;
padding: 0.4rem 1.3rem;
font-size: 1rem;
border: none;
cursor: pointer;
margin-right: 0.5rem;
transition: opacity 0.2s ease-in;
outline: none;
}

.badge {
font-size: 0.8rem;
padding: 0.1rem;
text-align: center;
margin: 0.3rem;
background: var(--light-color);
color: #333;
}

.alert {
padding: 0.8rem;
margin: 1rem 0;
opacity: 0.9;
background: var(--light-color);
color: #333;
}

.btn-primary,
.bg-primary,
.badge-primary,
.alert-primary {
background: var(--primary-color);
color: #fff;
}

.btn-light,
.bg-light,
.badge-light,
.alert-light {
background: var(--light-color);
color: #333;
}

.btn-dark,
.bg-dark,
.badge-dark,
.alert-dark {
background: var(--dark-color);
color: #fff;
}

.btn-danger,
.bg-danger,
.badge-danger,
.alert-danger {
background: var(--danger-color);
color: #fff;
}

.btn-success,
.bg-success,
.badge-success,
.alert-success {
background: var(--success-color);
color: #fff;
}

.btn-white,
.bg-white,
.badge-white,
.alert-white {
background: #fff;
color: #333;
border: #ccc solid 1px;  
}

.btn:hover {
opacity: 0.8;
}

.bg-light,
.badge-light {
border: #ccc solid 1px;
}

.round-img {
border-radius: 50%;
}

.line {
height: 1px;
background: #ccc;
margin: 1.5rem 0;
}

/* Overlay */
.dark-overlay {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Forms */
.form .form-group {
margin: 1.2rem 0;
}

.form .form-text {
display: block;
margin-top: 0.3rem;
color: #888;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="date"],
.form select,
.form textarea {
display: block;
width: 100%;
padding: 0.4rem;
font-size: 1.2rem;
border: 1px solid #ccc;
}

.form input[type="submit"],
button {
font: inherit;
}

.form .social-input {
display: flex; 
}

.form .social-input i {
padding: 0.5rem;
width: 4rem;
}

.form .social-input i.fa-twitter {
color: #38a1f3;
}
.form .social-input i.fa-facebook {
color: #3b5998;
}
.form .social-input i.fa-instagram {
color: #3f729b;
}
.form .social-input i.fa-youtube {
color: #c4302b;
}
.form .social-input i.fa-linkedin {
color: #0077b5;
}

.table th,
.table td {
padding: 1rem;
text-align: left;
}

.table th {
background: var(--light-color);
}

/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.7rem 2rem;
position: fixed;
z-index: 1;
width: 100%;
top: 0;
border-bottom: solid 1px var(--primary-color);
opacity: 0.9;
}

.navbar ul {
display: flex; 
}

.navbar a {
color: #fff;
padding: 0.45rem;
margin: 0 0.25rem;
}

.navbar a:hover {
color: var(--primary-color);
}

.navbar .welcome span {
margin-right: 0.6rem;
}

/* Landing Page */
.landing {
position: relative;
background: url("./img/showcase.jpg") no-repeat center center/cover;
height: 100vh;
}

.landing-inner {
color: #fff;
height: 100%;
width: 80%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

/* Profiles Page */
.profile {
display: grid;
grid-template-columns: 2fr 4fr 2fr;
align-items: center;
grid-gap: 2rem;
padding: 1rem;
line-height: 1.8;
margin-bottom: 1rem;  
}

/* Profile Page */
.profile-grid {
display: grid;
grid-template-areas:
"top top"
"about about"
"exp edu"
"github github";
grid-gap: 1rem;
}

.profile-top {
grid-area: top;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

.profile-top img {
width: 250px;
}

.profile-top .icons a {
color: #fff;
margin: 0 0.3rem;
}

.profile-top .icons a:hover {
color: var(--dark-color);
}

.profile-about {
grid-area: about;
text-align: center;
 }

.profile-about .skills {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.profile-exp {
grid-area: exp;
}

.profile-edu {
grid-area: edu;
}

.profile-exp h2,
.profile-edu h2 {
margin-bottom: 1rem;
}

.profile-exp > div,
.profile-edu > div {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: #ccc 1px dotted;
}

.profile-exp > div:last-child,
.profile-edu > div:last-child {
border: 0;
}

.profile-exp p,
.profile-edu p {
margin: 0.5rem 0;
}

.profile-github {
grid-area: github;
}

.profile-github .repo {
display: flex;
}

.profile-github .repo > div:first-child {
flex: 7;
flex-basis: 70%;
}

.profile-github > div:last-child {
flex: 3;
flex-basis: 20%;
}

/* Posts Page */
.post-form .post-form-header {
background: var(--primary-color);
padding: 0.5rem;
}

.post {
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 2rem;
align-items: center;
}

.post > div:first-child {
text-align: center;
}

.post img {
width: 100px; 
}

.post .comment-count {
background: var(--light-color);
color: var(--primary-color);
padding: 0.1rem 0.2rem;
border-radius: 5px;
font-size: 0.8rem;
}

.post .post-date {
color: #aaa;
font-size: 0.8rem;
margin-bottom: 0.5rem; 
}

/* Mobile Styles */
@media (max-width: 700px) {
.container {
margin-top: 8rem;
 }

.hide-sm {
display: none;
}

/* Text Styles */
.x-large {
font-size: 3rem;
}

.large {
font-size: 2rem;
}

.lead {
font-size: 1rem;
}

/* Navbar */
.navbar {
display: block;
text-align: center;
  }

.navbar ul {
text-align: center;
justify-content: center;
}

.navbar h1 {
margin-bottom: 1rem;
 }

.navbar .welcome {
display: none;
}

/* Profiles Page */
.profile {
grid-template-columns: 1fr;
text-align: center;
}

.profile ul {
display: none;
}

/* Profile Page */

.profile-top img,
.profile img {
width: 200px;
margin: auto;
}

.profile-grid {
grid-template-areas:
  "top"
  "about"
  "exp"
  "edu"
  "github";
}

.profile-about .skills {
flex-direction: column;
}

.dash-buttons a {
display: block;
width: 100%;
margin-bottom: 0.2rem;
}

.post {
grid-template-columns: 1fr;
}
.post a,
.post button {
padding: 0.3rem 0.4rem;
}
}

Ответы [ 2 ]

1 голос
/ 04 февраля 2020

Я полагаю, что есть какая-то проблема в css, позиция навигационной панели исправлена, и это вызывает проблему

0 голосов
/ 04 февраля 2020

Вы должны знать разницу между 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>

Ваш код, как правило, будет складываться без разделительных элементов.

Что касается вашей проблемы, вероятно, это position: fixed в твоей навигационной панели. Попробуйте добавить некоторые отступы для компромисса.

ПРИМЕР ДЛЯ КОНЦЕРНА ФРАГМЕНТА:

Предполагая, что у вас есть навигация как это: 

<nav>
 ...
</nav>

и в настоящее время, как вы назовите свои страницы, вы оберните это фрагментом 

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

, и ваш основной файл, похоже, будет также обернут во фрагмент 

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

Результат на DOM? Это будет что-то вроде этого: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...