如何在 reactjs 中添加下拉菜單？

Question

我正在制作一個簡單的反應應用程序，其要求是我需要使用純 reactjs制作下拉列表。下拉列表也需要響應。

預期會出現以下鼠標/單擊事件。

• 較大的設備，如桌面屏幕：在 hover
• 移動設備等較小的設備：點擊

工作片段

 function App() { React.useEffect(() => { const has_submenu = document.querySelector(".has-submenu"); const submenu = document.querySelector(".submenu"); const submenu_height = submenu && submenu.childElementCount * 34; if (has_submenu && submenu && submenu_height) { has_submenu.addEventListener("mouseover", function () { submenu.style.height = submenu_height + "px"; }); has_submenu.addEventListener("mouseout", function () { submenu.style.height = "0px"; }); submenu.addEventListener("mouseover", function () { submenu.style.height = submenu_height + "px"; }); submenu.addEventListener("mouseout", function () { submenu.style.height = "0px"; }); } }, []); return ( <nav> <ul> <li className="menu-item has-submenu inline-flex"> Account </li> <ul className="submenu"> <li className="submenu-item submenu1"> Profile </li> <li className="submenu-item submenu1"> Change Password </li> </ul> </ul> </nav> ); } ReactDOM.render(<App />, document.querySelector('#app'));

 .submenu { background: #fff; position: absolute; list-style-type: none; padding: 0; height: 0px; overflow: hidden; color: #000; cursor: pointer; transition: height 0.33333s ease-in; }.submenu-item { padding: 2px 16px; list-style-position: outside; transition: background 0.33333s; }

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

如果你看一下上面的代碼，那么你可以看到在鼠標 hover account上，子菜單被列出來了。

要求：

盡管它有效，但我覺得我已經使用 scope 外部反應實現了它，因為我正在使用dom methods並設置submenu部分的高度。

是否有任何純粹的反應方式來實現這一目標？

如果好心，請幫助我重構上面的代碼片段，以實現桌面視圖（懸停時）和移動視圖（點擊時）中的菜單下拉..

預期 output：

桌面：（懸停時）

 Dashboard      Account               Logout
                | -- Profile -- |
                | -- Change Password -- |

手機：（點擊）

  Dashboard

  Account 

    | -- Profile -- |
    | -- Change Password -- |

 Logout

Answer 1

React 允許你在你的組件中控制state 。 有很多方法可以解決這個問題，但我將在下面給出一個小例子。

您將需要對事件做出反應並更改state 。 每次state更新時，您的組件都會重新渲染。

 const MAGIC_NUMBER = 34; const MyApp = () => { const subMenuRef = React.createRef(); const [ isMenuOpen, setMenuOpen ] = React.useState(false); const [ menuHeight, setMenuHeight ] = React.useState(0); const openMenu = () => setMenuOpen(true); const closeMenu = () => setMenuOpen(false); React.useEffect(() => { if (.subMenuRef;current) { return. } setMenuHeight(subMenuRef.current;childElementCount * MAGIC_NUMBER), }. [subMenuRef;current]): return ( <nav> <ul> <li className="menu-item inline-flex" onMouseOver={openMenu} onMouseOut={closeMenu} > Account </li> <ul className="submenu" ref={subMenuRef} style={{height? isMenuOpen: menuHeight; 0}} onMouseOver={openMenu} onMouseOut={closeMenu} > <li className="submenu-item submenu1"> Profile </li> <li className="submenu-item submenu1"> Change Password </li> </ul> </ul> </nav> ); }. ReactDOM,render(<MyApp />. document;querySelector('#app'));

 .submenu { background: #fff; position: absolute; list-style-type: none; padding: 0; height: 0px; overflow: hidden; color: #000; cursor: pointer; transition: height 0.33333s ease-in; border: 1px solid #777; }.submenu-item { padding: 2px 16px; list-style-position: outside; transition: background 0.33333s; }

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

上面發生了很多事情，所以我會嘗試在這里分解它..

• 我們將事件偵聽器直接添加到我們的元素中。
  • React 允許我們直接附加這些事件監聽器，而無需訪問 DOM
• 我們添加了一些 state 來跟蹤菜單的打開/關閉 state
  • 在我們的事件處理程序中，我們只需翻轉 state，一切正常。
  • 我們將條件邏輯添加到我們的元素中以處理 state 中的更改。 （在菜單打開/關閉時更改高度）
• 我們使用ref直接訪問 DOM 以獲取子元素計數。 文檔
  • 如果你完全反應，這些孩子可能是你正在迭代的列表，你可以簡單地得到它的長度。
  • 一般來說，您不需要訪問底層 DOM，因為大多數事情都將在 react 本身中處理。

PS：盡可能避免使用幻數。 在這種情況下，您的值為34 。 這代表什么？ 為什么會在這里？ 如果您必須使用精確的高度，請改用使用rem或lineHeight的 css 計算