React基本布局-下拉菜单

意义

下拉菜单在不少网站都能见到，鼠标悬浮在导航元素上时会自动弹出子菜单。

好处：

1. 用于导航分类
2. 能够在有限的视区内展现更多的内容

DOM 结构

导航的语义化标签为 nav，内容为列表 ul，列表元素水平分布能够利用浮动或者 flex。

例如：

<nav>
  <ul>
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
  </ul>
</nav>
复制代码

下拉菜单也是列表结构，例如：

<nav>
  <ul>
    <li>
      <a>导航1</a>
      <ul>
        <li>导航1-1</li>
        <li>导航1-2</li>
        <li>导航1-3</li>
      </ul>
    </li>
    <li>导航2</li>
    <li>导航3</li>
  </ul>
</nav>
复制代码

若是是非自动(hover)弹出能够直接用 HTML5/select & options。

响应鼠标事件

1. 在鼠标离开 nav-item 及其全部子元素时，关闭 dropdown menu，对应的 DOM Event 是 mouseleave。(不是 mouseout)

2. 在鼠标进入 nav-item 根元素时，打开 dropdown menu，对应的 DOM Event 是 mouseenter。(比 mouseover 准确)

Dropdown 的 TSX 结构

列表由数组渲染生成，把 items 看做 Functor，将渲染函数应用到每一个元素。即 fmap renderToTSX items。

type Anchor = {
  name: string
  href?: string
}

const Dropdown = ({ items }: { items: Anchor[] }) => (
  <ul className="head-dropdown">
    {items.map(({ name, href }) => (
      <li>
        <a href={href}>{name}</a>
      </li>
    ))}
  </ul>
)
复制代码

对应的层叠样式表

为了不因 dropdown menu 动态显示致使 DOM 结构 reflow，因此利用绝对定位让它脱离文档流。

.head-dropdown {
  position: absolute;
  z-index: 999;
}
复制代码

使用 Hook/useState

由于要动态显示 dropdown menu，因此属于异步的 DOM 操做。使用 setState 来实现。

type NavItemProps = Anchor & {
  items: Anchor[]
}

const NavItem = ({ name, href, items }: NavItemProps) => {
  const [display, setComponent] = useState(<></>)
  const visible = () => setComponent(<Dropdown items={items} />)
  const hidden = () => setComponent(<></>)

  return (
    <li className="nav-item" onMouseEnter={visible} onMouseLeave={hidden}>
      <a href={href}>{name}</a>
      {display}
    </li>
  )
}
复制代码

nav-item 的层叠样式表。须要兼容 IE10 如下就使用浮动。

.nav-item {
  float: left;
  padding: 0 0.5rem;
}
复制代码

App

const App = () => (
  <nav>
    <ul>
      <NavItem
        name="item1"
        items={[
          { name: "subitem1", href: "#" },
          { name: "subitem2", href: "#" },
          { name: "subitem3", href: "#" }
        ]}
      />
    </ul>
  </nav>
)
复制代码