Javascript 如何更改react组件中的CSS高度？

我使用以下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");
}

---

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

您可以使用useEffect管理高度

useEffect(()=>{
// your code mere below is just an example.
 if (nav.classList.contains("is-open")) {
     menuDropdown.style.setProperty("height", height + "px");
} else {
     menuDropdown.style.setProperty("height", "0");
}
// [isOpen] here maintain this useEffect and runs only if the value isOpen is changed
}, [isOpen])

---

如果要转换下拉菜单的高度，最好切换菜单上的类并使用纯CSS技术。我推荐“技术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;

import React，{useState}来自“React”；
导入“./Header.scss”；
常量头=（）=>{
const[Height，setHeight]=useState（'0px'）；
const handleClickMenu=（）=>（（高度='0px'）？设置高度（'80px'）：
设置高度（'0px'）；
返回(
你的汉堡纽扣
//你的下拉列表
);
};
导出默认标题；

带显示：无我无法使用过渡动画。菜单在vanilla JS/CSS中已经可以正常工作了，我只需要一种方法让它与React一起工作就可以了。mmm，好的，那么你可以使用内联样式html属性，我更新了答案检查出来如果状态是布尔标志，比如

open

，你只需要在style对象中使用它：

style={{高度：打开？高度值：0}}

谢谢。你的解决方案很好。我需要更深入地了解React。我将学习一门课程或其他课程。我只使用组件来显示内容，但与普通ES6相比，添加逻辑似乎很奇怪。@ZoltanKing是的，React需要完全的思维转变！当你使用embra时，它的数据优先模式真的很好使用正确的React API（在本例中使用ref）正确检索高度后，这是否回答了您的问题，您可以使用以下命令将其应用于正确的元素：

。将普通的DOM操作转换为React实际上没有意义。您需要这样做，而不是读取DOM，您只读取自己的数据状态，并始终写入DOM。