英文:
Dropdown menu is not displaying in my react hooks in a Navbar component imported in Home page
问题
在我的导航栏中，"About Us" 下拉菜单在我的React Hooks Web应用程序中未显示。以下是我安装的依赖项。请问可能的原因是什么？
CSB链接：https://codesandbox.io/s/elegant-solomon-s7hyck?file=/public/index.html:571-622
"flowbite": "^1.7.0",
"flowbite-react": "^0.4.11",
"postcss": "^8.4.25",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"tailwindcss": "^3.3.2"
导航栏组件：
const Navbar = () => {
return (
<nav className="bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="#" className="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" className="h-8 mr-3" alt="Flowbite Logo" />
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<button data-collapse-toggle="navbar-dropdown" type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
<span className="sr-only">Open main menu</span>
<svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<div className="hidden w-full md:block md:w-auto" id="navbar-dropdown">
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="#" className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
</li>
<li>
<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" className="flex items-center justify-between w-full py-2 pl-3 pr-4 text-gray-900 rounded hover-bg-gray-100 md:hover-bg-transparent md:border-0 md:hover-text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover-text-blue-500 dark:focus-text-white dark:border-gray-700 dark:hover-bg-gray-700 md:dark:hover-bg-transparent">About Us <svg className="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" /></svg></button>
<div id="dropdownNavbar" className="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
<ul className="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
<li>
<a href="https://flowbite.com/" className="block px-4 py-2 hover-bg-gray-100 dark:hover-bg-gray-600 dark:hover-text-white">About Rob NDIS</a>
</li>
<li>
<a href="#" className="block px-4 py-2 hover-bg-gray-100 dark:hover-bg-gray-600 dark:hover-text-white">Our People</a>
</li>
<li>
<a href="#" className="block px-4 py-2 hover-bg-gray-100 dark:hover-bg-gray-600 dark:hover-text-white">Mission Statment</a>
</li>
</ul>
<div className="py-1">
<a href="#" className="block px-4 py-2 text-sm text-gray-700 hover-bg-gray-100 dark:hover-bg-gray-600 dark:text-gray-400 dark:hover-text-white">Sign out</a>
</div>
</div>
</li>
<li>
<a href="#" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover-bg-gray-100 md:hover-bg-transparent md:border-0 md:hover-text-blue-700 md:p-0 dark:text-white md:dark:hover-text-blue-500 dark:hover-bg-gray-700 dark:hover-text-white md:dark:hover-bg-transparent">Services</a>
</li>
<li>
<a href="#" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover-bg-gray-100 md:hover-bg-transparent md:border-0 md:hover-text-blue-700 md:p-0 dark:text-white md:dark:hover-text-blue-500 dark:hover-bg-gray-700 dark:hover-text-white md:dark:hover-bg-transparent">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar;
Tailwind配置：
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}"
],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')],
}
Home.js：
import React from 'react';
import Navbar from './Navbar';
const Home = () => {
return (
<div className='container'>
<Navbar/>
<div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
<h1 className="text-2xl font-bold text-center">Welcome to the "Rob NDIS"</h1>
<p className="text-3xl text-gray-700 font-bold mb-5">
Welcome!
</p>
<p className="text-gray-500 text-lg">
React and Tailwind CSS in action
</p>
</div>
</div>
<details>
<summary>英文:</summary>
In my Navbar, the `About Us` dropdown menu is not displaying in my react hooks web app. Following are my dependencies installed. Could someone please advise what could be the reason here ?
CSB link: https://codesandbox.io/s/elegant-solomon-s7hyck?file=/public/index.html:571-622
[![enter image description here][1]][1]
"flowbite": "^1.7.0",
"flowbite-react": "^0.4.11",
"postcss": "^8.4.25",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"tailwindcss": "^3.3.2"
// Navbar component:
const Navbar = () => {
return (
<nav className="bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="#" className="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" className="h-8 mr-3" alt="Flowbite Logo" />
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<button data-collapse-toggle="navbar-dropdown" type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
<span className="sr-only">Open main menu</span>
<svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<div className="hidden w-full md:block md:w-auto" id="navbar-dropdown">
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="#" className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
</li>
<li>
<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" className="flex items-center justify-between w-full py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">About Us <svg className="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
</svg></button>
<div id="dropdownNavbar" className="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
<ul className="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
<li>
<a href="https://flowbite.com/" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">About Rob NDIS</a>
</li>
<li>
<a href="#" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Our People</a>
</li>
<li>
<a href="#" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Mission Statment</a>
</li>
</ul>
<div className="py-1">
<a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Sign out</a>
</div>
</div>
</li>
<li>
<a href="#" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
</li>
<li>
<a href="#" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar;
Tailwind Configuration:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}"
],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')
],
}
// Home.js
import React from 'react';
import Navbar from './Navbar';
const Home = () => {
return (
<div className='container'>
<Navbar/>
<div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
<h1 className="text-2xl font-bold text-center">Welcome to the "Rob NDIS"</h1>
<p className="text-3xl text-gray-700 font-bold mb-5">
Welcome!
</p>
<p className="text-gray-500 text-lg">
React and Tailwind CSS in action
</p>
</div>
</div>
);
};
export default Home;
[![enter image description here][2]][2]
[1]: https://i.stack.imgur.com/b427k.png
</details>
# 答案1
**得分**: 2
"the dropdown menu is not displaying because of this hidden property in this line."
"这个下拉菜单没有显示是因为这行代码中有一个隐藏属性。"
"you should handle it when the user clicks, hover or etc on it you should show it in one of these modes."
"当用户点击、悬停等操作时，你应该处理它，以在其中一种模式下显示它。"
"for more example, you can see: https://flowbite.com/docs/components/dropdowns/"
"如果需要更多示例，你可以查看：https://flowbite.com/docs/components/dropdowns/"
"good luck Dear."
"祝你好运，亲爱的。"
<details>
<summary>英文:</summary>
the dropdown menu is not displaying because of this hidden property in this line.
" className="z-10 hidden flex focus: font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600"".
you should handle it when the user clicks, hover or etc on it you should show it in one of these modes.
for more example, you can see: https://flowbite.com/docs/components/dropdowns/
good luck Dear.
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论