Блог

Я пытаюсь закрыть меню гамбургера, но оно не закрылось, сначала я инициализирую и устанавливаю значение useState равным false,

 const [burgerStatus,setBurgerStatus] = useState(false);
 

А затем я создал стилизованный компонент {BurgerNav}, а затем передал ему параметр show и присвоил {burgerStatus}.

 <BurgerNav show={burgerStatus}>
 

Затем в CSS я использовал преобразование

 transform: ${props => props.show ? 'translateX(0)': 'translateX(100%)'};
 

Затем в меню гамбургера я сначала создаю обработчик onClick и устанавливаю значение burgerstatus равным true, а затем пытаюсь щелкнуть по меню, и оно успешно открывается.

 <CustomMenu onClick={() => setBurgerStatus(true)}></CustomMenu>
 

Но затем я создаю другой обработчик onClick, чтобы закрыть меню, но он не может работать

 <CloseWrapper> 
     <CustomClose onclick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>
 

ПОЛНЫЙ КОД

     const [burgerStatus,setBurgerStatus] = useState(false);
    return (
        <Container>
            <a>
                <img src="/images/logo.svg" alt=""/> 
            </a>
             <Menu>
                <a href="#"> Model S</a> 
                <a href="#"> Model 3</a>
                <a href="#"> Model X</a>
                <a href="#"> Model Y</a> 
             </Menu>
             <RightMenu>
                <a href="#"> Shop</a> 
                <a href="#"> Tesla Account</a> 
                <CustomMenu onClick={() => setBurgerStatus(true)}>
                </CustomMenu>
             </RightMenu>
             <BurgerNav show={burgerStatus}>
                 <CloseWrapper> 
                    <CustomClose onclick={() => setBurgerStatus(false)}>
                    </CustomClose>
                 </CloseWrapper>
                 <li><a href="#">Existing Inventory</a></li>
                 <li><a href="#">Used Inventory</a></li>
                 <li><a href="#">Trade-in</a></li>
                 <li><a href="#">Cyber truck</a></li>
                 <li><a href="#">Roadster</a></li>
             </BurgerNav>
        </Container>
 

я вижу, что в вашем коде есть синтаксическая ошибка

 <CloseWrapper> 
     <CustomClose onclick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>
 

Перемены здесь onclick to onClick

 <CloseWrapper> 
     <CustomClose onClick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>
 

Тогда это должно сработать, пожалуйста, окажите некоторую поддержку, если мой ответ поможет, и примите его как ответ.

Я предлагаю также отредактировать ваш settings.json код в вашем редакторе кода.

Путем добавления —

 "emmet.includeLanguages": {
    "javascriptreact"
  }
 

Это поможет вам с автозаполнением вашего JSX и, надеюсь, поможет с этими небольшими ошибками в будущем. Или также добавление расширения, которое добавляет подсветку синтаксиса, действительно помогает видеть все немного проще.