如何向我的 React 應用程序添加下拉菜單？

Question

我正在使用 facebook 構建一個 react 應用程序：

https://github.com/facebookincubator/create-react-app

沿着 W SASS： https : //github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

我現在需要在標題中添加一個下拉菜單。 類似於 StackOverflow 上右上角的標題圖標，點擊打開和關閉。

我知道這聽起來像一個愚蠢的問題，但正確的方法是什么？ 我是否需要為這樣的東西添加一個像引導程序一樣的 UI 框架？ 我不需要所有的引導程序主題等......

謝謝 - 請善待這個問題，因為我是一名獨立開發人員，真的可以幫助我在我的應用程序上建立堅實的基礎。

謝謝

Answer 1

是的，您可以僅使用 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>

Answer 2

你可以像這樣使用react-select ：

var 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

還有這個圖書館：

https://www.npmjs.com/package/react-dropdown

Answer 3

看來你的項目還處於起步階段。 並且您願意將庫合並到您的項目中。 所以我肯定會建議你現在就選擇一個圖書館。

使用 React，您可以毫不費力地創建自己的菜單。 但是您還需要其他組件用於應用程序的其余部分。 如果您選擇許多人使用的庫（而不是您自己的庫），那么您的菜單（和其他組件）的質量很可能會更高。 對於“質量”，我的意思是：用戶體驗設計、HTML 標准、API 可重用性、缺陷數量等。

如果您認為您的應用程序很小並且不需要整個 UI 框架，您可能需要為菜單搜索一個獨立的組件。 這里是導航組件列表（包括每個項目的github星數）： https : //devarchy.com/react/topic/navigation

但在大多數情況下，我會選擇整個 UI 框架： https : //devarchy.com/react/topic/ui-framework

以下是一些流行的 UI 框架的菜單/導航/應用欄的一些演示：

• https://ant.design/components/menu/
• https://react-bootstrap.github.io/components.html#navs-dropdown
• http://www.material-ui.com/#/components/app-bar

Answer 4

自定義下拉菜單

下拉菜單

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;
}

父.js

<DropDown placeholder="select a type" content={["breakfast", "lunch", "dinner", "Snacks"]} />