React Hooks 实现简单的dropdown

本来使用antd的来做的，但是觉得就为了一个dropdown而引antd，就自己写了一个。 React代码如下

import React, { useState } from 'react'
import PropTypes from 'prop-types'

function Dropdown(props) {
  const { items } = props
  const [displayMenu, setDisplayMenu] = useState(false)
  const [title, setTitle] = useState(props.title)
  const showDropdownMenu = () => setDisplayMenu(!displayMenu)

  const hideDropdownMenu = v => {
    setDisplayMenu(false)
    setTitle(v)
  }

  return (
    <>
      <div style={{ 'position': 'fixed', 'inset': '0px' }} onClick={() => setDisplayMenu(false)}></div>
      <div className='dropdown'>
        <div className='button' onClick={() => showDropdownMenu()}>
          {title}
          <div className='triangle_button'>
            <i className='triangle'></i>
          </div>
        </div>
        {
          displayMenu && (
            <div className='menu'>
              {items.map((item) => (
                <div className={ item === title && 'active' } onClick={() => hideDropdownMenu(item)} key={item.toString()}>
                  {item}
                </div>
              ))}
            </div>
          )
        }
      </div>
    </>
  )
}
Dropdown.propTypes = {
  title: PropTypes.string,
  items: PropTypes.array
}

export default Dropdown

CSS代码

.dropdown{
    border-radius: 4px;
    border: 1px solid #eee;
    color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 14px;
    cursor: pointer;
}
.menu{
    position: absolute;
    top: 35px;
    width: 100%;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.button{
    width: 100%;
    text-align: center;
    position: relative;
}
.button,.menu > div{
    height: 30px;
    line-height: 30px;
}

.menu > div.active{
    background: #c6eafd;
}

.menu > div:hover{
    background: #e7f8eb;
}
.triangle_button{
    width: 26px;
    border-left: 1px solid #ddd;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
}
.triangle{
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #282c34;
}