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

Question

我正在使用 facebook 构建一个 React 应用程序:

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

沿着 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 框架(例如 Bootstrap )来完成这样的事情？我不需要所有引导主题等...

谢谢 - 请善待这个问题，因为我是一名独立开发者，确实需要一些帮助来为我的应用程序打下坚实的基础。

谢谢

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>