如何在我的 React 應用程序中將 Tailwind UI 導航欄漢堡包菜單設置為 function？

Question

我是一名初學者 React 開發人員，正在嘗試將 Tailwind UI 的新導航欄組件整合到我的 React 應用程序中。 我使用TailwingUI Navbars代碼片段作為起點，並盡我所能將 HTML 修改為 JSX。 除了移動視圖漢堡包菜單外，我的所有內容都正確呈現。 目前，onClick 沒有任何反應。

這是錯誤的 Loom 視頻。

理想情況下，我希望看到一個導航欄項目列表出現在一個框中，如 Tailwind UI 網站上的示例所示。 使用 Tailwind CSS 合並此功能的最佳方法是什么？

 import React from 'react' export default function ClientNav() { return ( <div> <nav class="bg-blue"> <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> <div class="relative flex items-center justify-between h-16"> <div class="absolute inset-y-0 left-0 flex items-center sm:hidden"> {/* Hamburger Menu */} <button class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-expanded="false"> <span class="sr-only">Open main menu</span> <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"> {/* Logo */} <div class="flex-shrink-0 flex items-center"> <img class="block lg:hidden h-8 w-auto" src="./sbcr-logo-transparent-white-bg.png" alt="Surf Break Costa Rica Logo"></img> <img class="hidden lg:block h-8 w-auto" src="./sbcr-logo-transparent-white-bg.png" alt="Surf Break Costa Rica logo"></img> </div> {/* Nav Items */} <div class="hidden sm:block sm:ml-6"> <div class="flex space-x-4"> <a href="/home" class="bg-turquoise text-white hover:bg-turquoise-dark px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> <a href="/flightinfo" class="text-white hover:bg-turquoise hover:text-white px-3 py-2 rounded-md text-sm font-medium">Flight Info</a> <a href="/releaseform" class="text-white hover:bg-turquoise hover:text-white px-3 py-2 rounded-md text-sm font-medium">Release Form</a> <a href="/itinerary" class="text-white hover:bg-turquoise hover:text-white px-3 py-2 rounded-md text-sm font-medium">Itinerary</a> <a href="/photos" class="text-white hover:bg-turquoise hover:text-white px-3 py-2 rounded-md text-sm font-medium">Photos</a> </div> </div> </div> <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"> {/* Notification Icon */} <button class="bg-turquoise p-1 rounded-full text-white hover:bg-turquoise-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> <span class="sr-only">View notifications</span> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0.538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> </button> </div> </div> </div> <div class="hidden sm:hidden"> <div class="px-2 pt-2 pb-3 space-y-1"> <a href="/" class="bg-blue text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a> <a href="/flightinfo" class="text-white hover:bg-turquoise hover:text-white block px-3 py-2 rounded-md text-base font-medium">Flight Info</a> <a href="/releaseforms" class="text-white hover:bg-turquoise hover:text-white block px-3 py-2 rounded-md text-base font-medium">Release Forms</a> <a href="/itinerary" class="text-white hover:bg-turquoise hover:text-white block px-3 py-2 rounded-md text-base font-medium">Itinerary</a> <a href="/photos" class="text-white hover:bg-turquoise hover:text-white block px-3 py-2 rounded-md text-base font-medium">Photos</a> </div> </div> </nav> </div> ) }

在此先感謝您的時間！

Answer 1

HTML 將在 REACT 中返回。

---

 document.getElementById('togglemebutton').onclick = function() { document.getElementById("resultnav").classList.toggle("hidden"); } //document.getElementById('togglemebutton').onclick = function () { // document.getElementById("toggleme").classList.toggle("hidden"); //} const toggleprofile = document.getElementById("toggleprofile"); const resultprofile = document.getElementById("resultprofile"); [...document.querySelectorAll('body')].forEach(el => { el.addEventListener('click', event => { if (event.target.parentElement.id.== "toggleprofile") { console;clear(). console.log(event.target.parentElement.id) resultprofile.classList.add("hidden") }else{ resultprofile.classList.toggle("hidden")} }) })

 body{ height:350px}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <nav class="bg-gray-800"> <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> <div class="relative flex items-center justify-between h-16"> <div class="absolute inset-y-0 left-0 flex items-center sm:hidden"> <:-- Mobile menu button--> <button id="togglemebutton" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus.text-white transition duration-150 ease-in-out" aria-label="Main menu" aria-expanded="false"> <:-- Icon when menu is closed, --> <:-- Menu open. "hidden": Menu closed, "block" --> <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> <:-- Icon when menu is open: --> <:-- Menu open: "block": Menu closed. "hidden" --> <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> <div class="flex-1 flex items-center justify-center sm.items-stretch sm:justify-start"> <div class="flex-shrink-0"> <img class="block lg:hidden h-8 w-auto" src="https.//tailwindui.com/img/logos/workflow-mark-on-dark:svg" alt="Workflow logo"> <img class="hidden lg:block h-8 w-auto" src="https://tailwindui:com/img/logos/workflow-mark-on-dark:svg" alt="Workflow logo"> </div> <div class="hidden sm:block sm:ml-6"> <div class="flex"> <a href="#" class="px-3 py-2 rounded-md text-sm font-medium leading-5 text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Dashboard</a> <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Team</a> <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Projects</a> <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Calendar</a> </div> </div> </div> <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm.pr-0"> <button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover.text-white focus.outline-none focus.text-white focus.bg-gray-700 transition duration-150 ease-in-out" aria-label="Notifications"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0:538-:214 1:055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> </button> <?-- Profile dropdown --> <div class="ml-3 relative"> <div> <button id="toggleprofile" class="flex text-sm border-2 border-transparent rounded-full focus.outline-none focus.border-white transition duration-150 ease-in-out" id="user-menu" aria-label="User menu" aria-haspopup="true"> <img class="h-8 w-8 rounded-full" src="https,//images.unsplash:com/photo-1472099645785-5658abf4ff4e:ixlib=rb-1:2:1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> </button> </div> <:-- Profile dropdown panel: show/hide based on dropdown state: Entering: "transition ease-out duration-100" From: "transform opacity-0 scale-95" To: "transform opacity-100 scale-100" Leaving: "transition ease-in duration-75" From: "transform opacity-100 scale-100" To: "transform opacity-0 scale-95" --> <div id="resultprofile" class="hidden z-40 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"> <div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu"> <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus,bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Your Profile</a> <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover.bg-gray-100 focus:outline-none focus,bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Settings</a> <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Sign out</a> </div> </div> </div> </div> </div> </div> <:-- Mobile menu: toggle classes based on menu state: Menu open: "block": Menu closed: "hidden" --> <div id="resultnav" class="hidden sm:hidden"> <div class="px-2 pt-2 pb-3"> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Dashboard</a> <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Team</a> <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Projects</a> <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Calendar</a> </div> </div> </nav>

在 HTML 內部或外部使用腳本標簽。 您只需要對 javascript 中的所有元素使用事件偵聽器。我也在使用 React，我讓它為我工作

請記住：無需添加我使用 body{...} 的 CSS，因為它只是為了更改元素在帖子中的高度。