我正在使用 facebook 构建一个 React 应用程序：
https://github.com/facebookincubator/create-react-app
我现在需要在标题中添加一个下拉菜单。类似于 StackOverflow 上右上角的标题图标，单击即可打开和关闭。
我知道这听起来像是一个愚蠢的问题，但是正确的方法是什么？我是否需要添加一个 UI 框架（例如引导程序）来完成这样的事情？我不需要所有引导主题等...
谢谢 - 请善待这个问题，因为我是一名独立开发人员，并且确实需要一些帮助来为我的应用程序奠定坚实的基础。
谢谢
是的，您只需使用 React 即可轻松完成此操作：
class Hello extends React.Component {
render() {
return <div className="nav">
<Link />
<Link />
<Link />
</div>;
}
}
class Link extends React.Component {
state = {
open: false
}
handleClick = () => {
this.setState({ open: !this.state.open });
}
render () {
const { open } = this.state;
return (
<div className="link">
<span onClick={this.handleClick}>Click Me</span>
<div className={`menu ${open ? 'open' : ''}`}>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
)
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);.nav {
display: flex;
border-bottom: 1px solid gray;
background: white;
padding: 0 10px;
}
.link {
width: 100px;
border-right: 1px solid gray;
padding: 10px;
text-align: center;
position: relative;
cursor: pointer;
}
.menu {
opacity: 0;
position: absolute;
top: 40px; // same as your nav height
left: 0;
background: #ededed;
border: 1px solid gray;
padding: 10px;
text-align: center;
transition: all 1000ms ease;
}
.menu.open {
opacity: 1;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>你可以像这样使用
react-selectvar Select = require('react-select');
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
function logChange(val) {
console.log("Selected: " + JSON.stringify(val));
}
<Select
name="form-field-name"
value="one"
options={options}
onChange={logChange}
/>
https://github.com/JedWatson/react-select
还有这个图书馆：
看来您的项目仍处于起步阶段。并且您愿意将库合并到您的项目中。所以我肯定会建议你现在就选择一个图书馆。
使用 React，您可以毫不费力地创建自己的菜单。但您的应用程序的其余部分还需要其他组件。如果您选择许多人（而不是您自己的）使用的库，那么您的菜单（和其他组件）的质量很可能会更高。对于“质量”，我的意思是：UX 设计、HTML 标准、API 可重用性、缺陷数量等。
如果您认为您的应用程序很小并且不需要整个 UI 框架，您可能需要搜索一个独立的菜单组件。以下是导航组件列表（包括每个项目的 github star 数）： https://devarchy.com/react/topic/navigation
但在大多数情况下，我会选择整个 UI 框架：https://devarchy.com/react/topic/ui-framework
以下是一些流行 UI 框架的菜单/导航/应用栏的一些演示：
自定义下拉菜单
下拉.js
import React, { useState } from "react";
import { mdiMenuDown } from "@mdi/js";
import Icon from "@mdi/react";
export default function DropDown({ placeholder, content }) {
const [active, setactive] = useState(0);
const [value, setvalue] = useState(0);
return (
<div className={active ? "dropdown_wrapper active" : "dropdown_wrapper"}>
<span
onClick={() => {
setactive(active ? 0 : 1);
}}
>
{value ? value : placeholder} <Icon path={mdiMenuDown} />
</span>
<div className="drop_down">
<ul>
{content &&
content.map((item, key) => {
return (
<li
onClick={() => {
setvalue(item);
setactive(0);
}}
key={key}
>
{item}
</li>
);
})}
</ul>
</div>
</div>
);}
下拉.css
.dropdown_wrapper {
position: relative;
margin-left: 100px;
cursor: pointer;
}
.dropdown_wrapper span {
padding: 12px;
border: 1px solid #a8aaac;
border-radius: 6px;
background-color: #ffffff;
display: flex;
color: #3d3e3f;
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
justify-content: space-between;
text-transform: capitalize;
}
.dropdown_wrapper span svg {
width: 20px;
margin-left: 80px;
fill: #fbb800;
transition: 0.5s ease all;
}
.dropdown_wrapper.active span svg {
transform: rotate(180deg);
transition: 0.5s ease all;
}
.dropdown_wrapper .drop_down {
background-color: #fff;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
position: absolute;
top: 53px;
width: 100%;
z-index: 9;
border-radius: 6px;
border: 1px solid #a8aaac;
height: 0px;
opacity: 0;
overflow: hidden;
transition: 0.5s ease all;
}
.dropdown_wrapper.active .drop_down {
height: fit-content;
opacity: 1;
transition: 0.5s ease all;
}
.dropdown_wrapper .drop_down ul {
list-style: none;
padding-left: 0;
margin: 0;
padding: 10px;
}
.dropdown_wrapper .drop_down ul li {
padding: 10px 0px;
color: #3d3e3f;
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
text-transform: capitalize;
cursor: pointer;
font-weight: 300;
}
.dropdown_wrapper .drop_down ul li:hover {
color: #faab1e;
transition: 0.5s ease all;
}
parent.js
<DropDown placeholder="select a type" content={["breakfast", "lunch", "dinner", "Snacks"]} />
app.js
import './App.css';
import React from "react";
import { Link, Route, Routes } from "react-router-dom";
// Import your page components
import Home from "./pages/Home";
import Services from "./pages/Services";
import Industries from "./pages/Industries";
import Insights from "./pages/Insights";
import About from "./pages/About";
import Careers from "./pages/Careers";
import Contact from "./pages/Contact";
// Define your main App component
function App() {
return (
// Use the <Routes> component to set up routing in your app
<Routes>
{/* Define routes for different paths */}
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/industries" element={<Industries />} />
<Route path="/insights" element={<Insights />} />
<Route path="/about" element={<About />} />
<Route path="/careers" element={<Careers />} />
<Route path="/contact" element={<Contact />} />
</Routes>
);
}
// Export the App component as the default export
export default App;
Nav.js
import React from "react";
import { Link } from "react-router-dom";
import logo from "./logo.jpg";
// Functional component for the navigation bar
function Navbar() {
return (
<nav>
{/* Logo section */}
<div className="logo">
{/* Link to the home page */}
<Link to="/" className="list">
<img src={logo} alt="Logo" width="150" height="107.35" />
</Link>
</div>
{/* List of navigation links */}
<ul>
{/* Link to Services page */}
<Link to="/services" className="list">
Services
</Link>
{/* Link to Industries page */}
<Link to="/industries" className="list">
Industries
</Link>
{/* Link to Insights page */}
<Link to="/insights" className="list">
Insights
</Link>
{/* Link to About page */}
<Link to="/about" className="list">
About
</Link>
{/* Link to Careers page */}
<Link to="/careers" className="list">
Careers
</Link>
{/* Link to Contact page */}
<Link to="/contact" className="list">
Contact
</Link>
</ul>
</nav>
);
}
export default Navbar;
关于.js
import React from "react"
import Navbar from "../Navbar"
function About(){
return(
<div>
<Navbar></Navbar>
<div className="content"><h1 style={{color: "#d094ea"}}>About</h1></div>
</div>
)
}
export default About
应用程序.css
html,body, ul {
margin: 0;
padding: 0;
height:100%;
}
.container {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-items: center;
position: relative;
}
nav {
background-color: #ffffff;
color:black;
display: flex;
position: relative;
align-items: center;
width: 100%;
}
.logo {
padding-top: 10px;
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
padding: 10px 0 0px 180px;
}
.list {
text-decoration: none;
color: rgb(188, 206, 251);
padding: 20px 30px 30px 20px;
transition: background-color 0.3s;
}
.list:hover {
color: rgb(208, 148, 234);
}
.list.active {
background-color: #555;
}
.page-content {
width: 100%;
padding: 20px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.content {
display:flex;
justify-content: center;
height: 100%;
width: 100%;
position: fixed;
padding-top: 250px;
background-color: #dbdbdb;
}