javascript - 如何更改 React 组件中的 CSS 高度？

Question

我使用以下 JavaScript 代码在 0 高度和 X 高度之间切换。这是汉堡包图标的下拉菜单。

// Hamburger navigation
const menuToggle = document.querySelector(".menu-toggle");
const nav = menuToggle.parentElement;
const menuDropdown = document.querySelector(".menu-dropdown");

menuToggle.addEventListener("click", event => {
    event.preventDefault();
    nav.classList.toggle("is-open");

    const height = menuDropdown.scrollHeight;

    if (nav.classList.contains("is-open")) {
        menuDropdown.style.setProperty("height", height + "px");
    } else {
        menuDropdown.style.setProperty("height", "0");
    }
});

我可以在 React 中使用类似的方法来切换“is-open”类，并且它可以工作:

const [isOpen, setState] = useState(false)
const toggleNav = () => setState(!isOpen)

但是我该如何处理高度呢？

const height = menuDropdown.scrollHeight;

if (nav.classList.contains("is-open")) {
     menuDropdown.style.setProperty("height", height + "px");
} else {
     menuDropdown.style.setProperty("height", "0");
}

如果有任何建议，我将不胜感激。

Answer 1

使用带有反应大括号的样式属性{}

import React, { useState } from 'react';
import './Header.scss';

const Header = () => {
 const [Height, setHeight] = useState('0px');

 const handleClickMenu = () => ((Height == '0px') ? setHeight('80px') : 
 setHeight('0px'));

 return (
   <nav>
     <button 
       type='button' 
       onClick={handleClickMenu} 
       className='your-navbar-burger-class'
     >
       your-hamburger-button
     </button>

     <div 
       className='your-dropdown-menu-class'
       style={{ height: Height}}
     >
       //your dropdown
     </div>
   </nav>
 );
};

export default Header;