Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >侧栏DOM与Navbar重叠,将其从DOM中删除。

侧栏DOM与Navbar重叠,将其从DOM中删除。
EN

Stack Overflow用户
提问于 2018-11-19 05:06:54
回答 2查看 73关注 0票数 2

当用户点击汉堡包菜单时,问题是当用户单击汉堡菜单时,侧边栏出现,但导航栏消失,我如何在不相互叠加的情况下同时呈现导航条和侧栏?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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.log(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);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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.log(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);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>

如片段所示,如果单击损坏的图像链接,我的表单将覆盖todolist导航条。

(非常感谢你所给予的建设性帮助:)

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-11-19 07:41:56

我通过a_m_dev的帮助解决了我的问题,然后添加了一个条件语句来检查类是否打开,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        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);

我希望这对有同样问题的人有所帮助:)

票数 0
EN

Stack Overflow用户

发布于 2018-11-19 05:23:18

问题在于,当您想要呈现侧栏菜单时,您使用的是以下代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ReactDOM.render(<Parent />, app);

这意味着只需在html文件中插入app元素中的组件。其结果将类似于删除先前呈现的组件和呈现新组件。这就是你在这里看到的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
...some code
          } 
        }
        ReactDOM.render(<Parent />, app); <---- here
    }

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

... morecode

您不需要直接呈现根元素中刚刚创建的每个组件。--您只需要在其中呈现最高级的组件--所有其他组件都应该嵌套在父组件中,这样您就只能从html文件在根元素中呈现一个父组件,并且通过在父组件中导入这些组件并在其中使用它们,将所有其他组件都包含在其中,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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')
)
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53375329

复制
相关文章
DOM 节点的克隆与删除
无奈的开头         关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了。但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情况更多,这里不详细讲解,只说明大概过程。         问题那么多,主要出现在浏览器自身实现上,其中尤属legacy IE上—IE6,7,8. 在添加节点的API实现上,IE做了一个贡献,那就是insertAdjacentHTML函数被纳入HTML5规范上,这个函数在之前的文章中详细讲解并实现
欲休
2018/03/15
2K0
虚拟DOM与真实DOM
虚拟DOM(Virtual DOM)和真实DOM(Real DOM)是在Web开发中常用的两种概念。虚拟DOM是React等一些JavaScript库和框架的核心概念之一,用于提高页面渲染性能和优化用户体验。真实DOM是浏览器中实际的HTML文档对象模型,用于表示和操作页面的结构和内容。
堕落飞鸟
2023/05/19
1K0
DOM Core 与 HTML-DOM
DOM(文档对象模型)是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API。比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和操作XML创建的标记(Tag)。
Chor
2019/11/07
1.9K0
(四)虚拟DOM与真实DOM
# 🍈 一、虚拟 DOM 是什么 虚拟 DOM 就是一个普通的 Object 对象(一般对象) # 🥫二、真实 DOM # 🧂总结 虚拟 DOM 就是一个普通的 Object 对象(一般对象) 虚拟 DOM 属性少,比较轻盈 真实 DOM 属性多,比较繁重 为什么虚拟 DOM 轻呢,因为他只在 React 内部用到了,不用真实 DOM 那么多属性,因为用不到,当然最后虚拟 DOM 会转换为真实 DOM 呈现在页面上
老怪兽
2023/02/21
8320
(四)虚拟DOM与真实DOM
React---虚拟DOM与DOM Diffing算法
1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
半指温柔乐
2021/04/23
6660
React---虚拟DOM与DOM Diffing算法
增量 DOM 与虚拟 DOM 的对比使用
如果你熟悉 React,你大概听说过虚拟 DOM 的概念。React 受欢迎的主要原因之一就是通过虚拟 DOM 提高用户界面性能。
桃翁
2021/01/13
1.6K0
JavaScript DOM 节点的拷贝、删除
拷贝一个节点相当于将一个节点作为对象存放在内存中,这个对象可以被其他的诸如 appendChild 等操作来使用。而节点删除则只能通过一个 removeChild 来实现,所以要删除某个元素,首先要获取这个元素的父节点。我们使用以下方法来实现,参考代码:
我与梦想有个约会
2023/10/20
2930
再谈BOM和DOM(1):BOM与DOM概述
DOM(文档对象模型)是 HTML 和 XML 的应用程序接口,是操作文档出现的 API,是为了操作文档出现的接口。DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js去读取这张地图。
周陆军
2021/07/13
8660
PHP中DOM操作
//创建一个tag名为people的Element,并添加到DOMDocument中
用户7886150
2021/02/26
8080
关于DOM事件流、DOM0级事件与DOM2级事件
DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window
Leophen
2019/08/26
2.1K0
HTML DOM(一):认识DOM
该文介绍了DOM的基本概念,包括DOM的定义、组成部分、级别和节点等,并举例说明了DOM在HTML、XML和CSS等文档中的应用。
高爽
2017/12/28
1.6K0
HTML DOM(一):认识DOM
【虚拟DOM】浅析 虚拟DOM
尽管MVVM将页面逻辑实现的核心转移到数据层面的修改上,但是最终数据层反映到页面上View的层的渲染和改变仍是通过对应的指令进行DOM操作来完成的。而且,通常一次ViewModel的变化可能会触发液面上多个指令操作DOM的变化,从而造成页面结构层发生大量DOM操作或渲染。
前端修罗场
2023/10/07
1540
【虚拟DOM】浅析 虚拟DOM
document对象(DOM)–认识DOM
文档对象模型DOM(Document Object Model)定义访问和处理 HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文 本的树结构(节点树)。
全栈程序员站长
2022/11/04
1.6K0
JQuery中DOM对象
var li_1 = ("< li id=‘liApple’>苹果< /li>"); //创建一个li元素。
我不是费圆
2020/09/21
4.9K0
JQuery中DOM操作[续]
10、设置和获取HTML、文本和值示例代码 <p title=”选择你喜欢的水果?”><b>选择你喜欢的水果?</b></p> <form action=”” method=”post”> 用户输入<input name=”title” id=”myinput” value=”请输入内容” /> </form> <script language=”javascript”> var p_html=$(“p”).html();//获取p元素的html代码,注意这里包含了<b></b> //如果需要重新设置,只需
苦咖啡
2018/05/07
8240
从DOM到虚拟DOM——前端DOM发展史、性能与产能双赢背后的思考
从我上大学开始正式认识前端这个岗位到现在已经整整过了六年,这六年于我而言就像是观赏了一场盛大的游园活动。无数各式各样的框架、模式、开发思路如同花车一般从眼前掠过又走远。留下了一地残乱的余烬和破碎的思考。
Nealyang
2020/12/15
9290
从DOM到虚拟DOM——前端DOM发展史、性能与产能双赢背后的思考
dom啦8 DOM事件
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <button>我是按钮</button> <a href="http://www.it666.com">我是a标签</a> <script type="text/javascript"> let qq= document.querySelector("button"); qq.onclick=function() { alert("按钮被点击了"); }
贵哥的编程之路
2020/10/28
1.1K0
DOM
1.获取元素节点的三个方法 1.1 document.getElementById("id") 返回值是给定id属性的元素节点对应的对象; 1.2document.getElementsByTagName("p") 返回的是给定标签的一个对象数组,可以使用for循环对数组进行遍历; document.getElementsByTagName("p").length获得长度; 1.3 document.getElementsByClassName("one") (此方法可能在某些DOM实现中没有
天天_哥
2018/09/29
7330
DOM
概念: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。 DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。 通俗理解: 把页面上的内容转换成对象的形式,通过操作对象,达到操作页面上标签和标签属性的一组方法
羊羽shine
2019/07/16
1.1K0
DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次变化的节点树,允许开发人员添加、移除和修改页面的某一部分。
奋飛
2021/08/30
1.5K0
DOM

相似问题

从DOM数组中删除DOM对象

20

从DOM中删除

44

通过操作加载网页的DOM创建侧栏

11

如何从DOM和内存中删除DOM元素?

47

JavaScript:检测DOM元素是否与DOM元素重叠,内部还是外部?

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文