Sidebar DOM 与 Navbar 重叠，将其从 DOM 中移除

Question

嗨，当用户单击汉堡菜单时，我使用 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.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);

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);

<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 导航栏。

非常感谢您的建设性帮助:)

Answer 1

我能够在 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);

我希望这可以帮助遇到同样问题的人:)

Answer 2

问题在于，当您要渲染侧边栏菜单时，您正在使用此代码

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

这意味着只需将组件在您的 html 文件中的 app 元素内插入即可。结果就像是清除了先前渲染的组件并渲染了新的组件。所以这就是你在这里看到的：

...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')
)