如何向我的 React 应用程序添加下拉菜单？

Question

I'm building a react app using facebook's:

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

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

I'm at a point now where I need to add a dropdown menu to the header. Similar to the header icons on StackOverflow in the top right that open and close on click.

I know this sounds like a dumb question but what is the right way to do this? Do I need to add a UI Framework like a bootstrap for something like this? I have no need for all the bootstrap theming etc...

Thank you - and please be kind to the question given I'm a solo developer and could really use some help building a solid foundation on my app.

Thanks

Answer 1

Yes you can do this easily with just 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

you can use react-select like this :

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

also this library :

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

Answer 3

Seems like your project is still in his infancy. And that you willing to incorporate a library to your project. So I would definitely recommend you to choose a library right now.

With React you could create your own menu without much effort. But you will also need other components for the rest of your app. And the quality of your menu (and other components) will most likely be greater if you choose a library used by many (rather than your own). For "quality" I mean: UX design, HTML standards, API reusability, number of defects, etc.

If you think your app will be small and won't need an entire UI Framework, you might want to search for an isolated component for menu. Here is a list of navigation components (including the number of github stars of each project): https://devarchy.com/react/topic/navigation

But in most cases I would choose an entire UI Framework instead: https://devarchy.com/react/topic/ui-framework

And here are some demos of the menu/nav/app-bar of some popular UI Frameworks:

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

Answer 4

Custom dropdown

Dropdown.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>
);}

dropdown.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"]} />