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

Question

I have a button in my Header component. When it is clicked, it calls a toggleNav function stored in my context.js. This function changes the state of isNavOpen from false to true. The navgiation then opens. There is no CSS in my project that should allow this behavior. I also don't see any JS code that should allow this behavior either. Could someone tell me what code allows my navigation to open and close?

My codesandbox

Answer 1

This is down to the basic way that React works, when you change the state of a component, it re-renders itself with the new values you've set into state .

Specifically it's this bit of Header.js:

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

When the component renders the first time, context.state.isNavOpen is false, and false && anything is still false, so javascript ignores the code after the && . That means it skips over the menu code.

The second time it renders, after you update the state which is pushed to context and then passed to <Header> as a prop (!), the component re-renders with your menu code.

If you use your browser's dev tools to inspect the DOM before and after you click the button, you'll find that the menu isn't hidden and shown, but rather when you don't see it, it's gone from the DOM altogether.

Answer 2

It's react feature whenever state changes component re-renders

same thing happening here

{context.state.isNavOpen && (

isNavOpen is toggling (true to false), (false to true)

for example - you can check it simply

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