当我仅更改状态而不使用任何CSS时为什么打开我的React应用程序菜单？

Question

我的页眉组件中有一个按钮。单击它时，它将调用存储在我的context.js中的toggleNav函数。此函数将isNavOpen的状态从false更改为true。然后将打开导航。我的项目中没有CSS应该允许这种行为。我也看不到任何允许这种行为的JS代码。有人可以告诉我哪些代码允许我打开和关闭导航吗？

我的codesandbox

Answer 1

这取决于React的基本工作方式，当您更改组件的state时，它会使用您在state中设置的新值来重新渲染自身。

特别是Header.js的这一部分：

    {context.state.isNavOpen && (
         <div className="js-nav nav">
         ...

[当组件首次呈现时，context.state.isNavOpen为false，而false && anything仍为false，因此javascript会忽略&&之后的代码。这意味着它将跳过菜单代码。

[第二次渲染时，更新了被推送到上下文的状态，然后以prop（！）形式传递给<Header>的状态后，组件将使用您的菜单代码重新呈现。

如果您在单击按钮之前和之后使用浏览器的开发工具来检查DOM，则会发现菜单没有隐藏和显示，但是当您看不到菜单时，菜单就从DOM中消失了总共。

Answer 2

每当状态更改组件重新渲染时，它就是反应功能

这里发生了同样的事情

{context.state.isNavOpen && (

[isNavOpen正在切换（从真到假），（从假到真）

例如-您可以简单地检查它

class Toggle extends React.Component {
   state = {
      visibility: false
    }
toggleVisibility=()=>{
 this.setState(prev=>({visibility:!prev.visibility}))
}
  render() {
     const {visibility} = this.state;
      return (
        <div>
          <button onClick={this.toggleVisibility}>Click Me</button>
          <h3>{visibility?'Welcome':''}</h3>
        </div>
      );
    }
};