Боковая панель DOM перекрывает панель Navbar, удаляя ее из DOM

Привет, я использую React для создания боковой панели, когда пользователь нажимает на меню гамбургера, проблема в том, что когда пользователь нажимает на меню гамбургера, боковая панель появляется, но панель навигации исчезает, как мне визуализировать как панель навигации, так и боковую панель, не накладывая ее Другая?

var app = document.getElementById('app');

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            sidebarOn: false
        };
        this.onClickOpen = this.onClickOpen.bind(this);
    }
    
    onClickOpen(open) {
        console.info(open);
        if (open) {
            this.setState({sidebarOn: open});
            Menu();
        }
        
    }
    render() {
        return(
            <div>
            <header>    
            <nav class = "navbar navbar-custom sticky-top">
                <a class = "navbar-brand" href = "#">TO DO LIST</a>
                <a class = "burger-menu" href = "#"><img src='/images/hamburger-icon.png' onClick = {() => this.onClickOpen(true)}></img></a>
            </nav>
            </header>
        </div>
        );
    }
}



function Menu() {
    class Parent extends React.Component {
        constructor() {
            super();
            this.state = {
                burgerOn: "burger-right"
            };
        }
      render() {
        return (
            <div class = {this.state.burgerOn}>
                      <div class = "container">
                <form >
                    <div class = "form-group task-title">
                    <label for = "title">
                        Task Title
                    </label>
                    <input type = "title" class = "form-control" placeholder = "Enter Task Title"></input>
                    </div>
                    <div class = "form-group task-desc">
                        <label for = "desc">Task Description</label>
                        <textarea type = "text" class = "form-control" id = "desc" placeholder = "Enter Task Description" rows = "5"></textarea>
                    </div>
                </form>
                <div>
                <button type = "button" class = " task-btn btn btn-primary">Create</button>
                </div>
                </div>
            </div>
        );
      } 
    }
    ReactDOM.render(<Parent />, app);
}

ReactDOM.render(<Navbar />, app);

var app = document.getElementById('app');

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            sidebarOn: false
        };
        this.onClickOpen = this.onClickOpen.bind(this);
    }
    
    onClickOpen(open) {
        console.info(open);
        if (open) {
            this.setState({sidebarOn: open});
            Menu();
        }
        
    }
    render() {
        return(
            <div>
            <header>    
            <nav class = "navbar navbar-custom sticky-top">
                <a class = "navbar-brand" href = "#">TO DO LIST</a>
                <a class = "burger-menu" href = "#"><img src='/images/hamburger-icon.png' onClick = {() => this.onClickOpen(true)}></img></a>
            </nav>
            </header>
        </div>
        );
    }
}



function Menu() {
    class Parent extends React.Component {
        constructor() {
            super();
            this.state = {
                burgerOn: "burger-right"
            };
        }
      render() {
        return (
            <div class = {this.state.burgerOn}>
                      <div class = "container">
                <form >
                    <div class = "form-group task-title">
                    <label for = "title">
                        Task Title
                    </label>
                    <input type = "title" class = "form-control" placeholder = "Enter Task Title"></input>
                    </div>
                    <div class = "form-group task-desc">
                        <label for = "desc">Task Description</label>
                        <textarea type = "text" class = "form-control" id = "desc" placeholder = "Enter Task Description" rows = "5"></textarea>
                    </div>
                </form>
                <div>
                <button type = "button" class = " task-btn btn btn-primary">Create</button>
                </div>
                </div>
            </div>
        );
      } 
    }
    ReactDOM.render(<Parent />, app);
}

ReactDOM.render(<Navbar />, app);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head> 
        <script src = "https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script src = "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src = "https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>   
        <div id = "app"></div>
        <script type = "text/babel" src = "/js/app.js"></script>    
</body>
</html>

Боковая панель DOM перекрывает панель Navbar, удаляя ее из DOM

Как видно из фрагмента, если вы нажмете на ссылку неработающего изображения, моя форма перезапишет панель навигации todolist.

Большое спасибо за конструктивную помощь :)

javascript html css reactjs jsx

19.11.2018 14:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

проблема в том, что когда вы хотите отобразить меню боковой панели, вы используете этот код

ReactDOM.render(<Parent />, app);

это означает, что просто вставьте то, что когда-либо компонент находится внутри элемента app в вашем html файле. результат был бы подобен стиранию ранее отрисованного компонента и рендерингу нового. вот что вы видите прямо здесь:

...some code
          } 
        }
        ReactDOM.render(<Parent />, app); <---- here
    }

    ReactDOM.render(<Navbar />, app); <---- and here

... morecode

вам не нужно напрямую отображать каждый компонент, который вы только что создали, внутри корневого элемента. вам нужно только ОДИН РАЗ отрендерить в нем самый верхний компонент все остальные компоненты должны быть вложены в родительский компонент, таким образом вы только визуализируете один родительский компонент внутри корневого элемента из html файла, а все остальные компоненты будут включены в него, импортировав их внутри вашего родительского компонента и используя их там, например ниже:

import React from 'react'
import ReactDOM from 'react-dom'

import B from './B'

class A extends React.component {
   render() {
     return(
       <div>
         <B />
       </div>
     )
   }
}


ReactDOM.render(
  <A />,
  document.querySelector('#app')
)

Хм, понятно, значит ли это, что мне нужно поместить родительский класс в другой JS-файл, затем импортировать его в app.js, а затем вложить в мой класс Navbar?

— 19.11.2018 14:30

Нет, вам нужно создать родительский компонент для хранения дочерних. Это означает, что вам нужно импортировать дочерние компоненты в родительский компонент, а затем отрендерить его, поскольку со временем ваши дочерние компоненты будут содержать больше дочерних компонентов, которые будут структурировать ваше приложение.

— 19.11.2018 15:35

Хорошо, я сделал это, и он работает хорошо, но я все еще не могу заставить его работать с onClick из глобального родительского класса, поэтому я структурировал его, как вы сказали, он показывает как панель навигации, так и боковую панель, но мне нужно иметь боковая панель отображается в обработчике кликов, как в моем коде! :)

— 19.11.2018 15:48

19.11.2018 14:23

Ответ принят как подходящий

Я смог исправить свой вопрос с помощью a_m_dev, а затем добавил условный оператор, чтобы проверить, был ли класс открыт или нет, например:

        class App extends React.Component {
        render() {
            return(
                <div>
                    <Navbar/>
                </div>
            );
        }
    }


    class Navbar extends React.Component {
        constructor() {
            super();
            this.state = {
                burgerOn: false
            }
        }
        clickHandler(open) {
            this.setState({burgerOn: open});
        }
        render() {
            return(
                <div>
                <header>    
                <nav class = "navbar navbar-custom sticky-top">
                    <a class = "navbar-brand" href = "#">TO DO LIST</a>
                    <a class = "burger-menu" href = "#"><img src='/images/hamburger-icon.png' onClick = {() => this.clickHandler(true)}></img></a>
                </nav>
                </header>
                <div>
                    {this.state.burgerOn ? <Parent/> : null}
                </div>
            </div>

            );
        }
    }

    class Parent extends React.Component {

        constructor() {
            super();
            this.state = {
                burgerOn: "burger-right"
            };
        }
        render() {
        return (
            <div class = {this.state.burgerOn}>
                      <div class = "container">
                <form >
                    <div class = "form-group task-title">
                    <label for = "title">
                        Task Title
                    </label>
                    <input type = "title" class = "form-control" placeholder = "Enter Task Title"></input>
                    </div>
                    <div class = "form-group task-desc">
                        <label for = "desc">Task Description</label>
                        <textarea type = "text" class = "form-control" id = "desc" placeholder = "Enter Task Description" rows = "5"></textarea>
                    </div>
                </form>
                <div>
                <button type = "button" class = " task-btn btn btn-primary">Create</button>
                </div>
                </div>
            </div>
        );
      }
    }




ReactDOM.render(<App/>, app);

Надеюсь, это поможет кому-то с той же проблемой :)

19.11.2018 16:41