[Day13] 学 Reactstrap 就离 React 更近了 ～ Navbar ‧ 初识篇

前言

今天说好要来介绍 Navbar，
就是导览列，所以也是前端经常使用到的 Component。
不过写完这篇发现文章长到可以被拆成两篇，
所以今天这篇主要是介绍 Navbar 的架构，
说好的 React 的 useState 会被摆在隔天的文章了orz

本日正文

觉得开始之前要先让大家直接感觉一下 Navbar 的程序跟成品长什麽样子：

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React, { useState } from "react";
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';

export default function App() {
  const [collapsed, setCollapsed] = useState(true);
  const toggleNavbar = () => setCollapsed(!collapsed);
  
  return (
    <div className="px-2">
      <Navbar light expand="md">
        <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
        <Collapse isOpen={!collapsed} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/alerts/">关於我</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/navbar/">与我联系</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

• 先让我们看一下这个 Navbar 没有被折叠的样子
  

• 还有一种情况是被折叠的样子，
  

可是这样好像还是有点不太能跟上面那段程序连结在一起，
首先让我们先来看没有折叠的样子。
这边我会鼓励你先不要管这两句：
<NavbarToggler onClick={toggleNavbar} className="mr-2" />
<Collapse isOpen={!collapsed} navbar>

这样就是 <Navbar> 里面包 <NavbarBrand>, <Nav>，
<Nav> 里面放一个一个项目 <NavItem>，
因为导览列通常会放连结，所以里面放 <NavLink>。
图片版说明：

最单纯的架构拆解大概是这样，
重头戏来了，<NavbarToggler> 跟 <Collapse> 又是什麽？

如果我们将画面宽度缩小，
会发现画面中原本「关於我、与我联系」的两个项目不见了，
取而代之是三条线的 icon (又称之为 汉堡选单，大家应该满常见的)，
这是因为手机版画面比较小，
连结项目一多，
往往无法像电脑版可以完整的将每一个项目都罗列出来，
因此才会有汉堡选单，
再往上看你会发现 <Navbar> 有一个属性设定为 expand="md"，
意思就是在 md 以上就要展开(不要折叠)，
反之意思就是 md 以下就要出现汉堡选单，
将 <Collapse> 的部份折叠起来，
待点击三条线的 icon(以下简称为 menu icon) 才将完整项目呈现出来。

<NavbarToggler> 就是那个 menu icon 的部份，
<Collapse> 就是指 Navbar 中需要被折叠隐藏起来的部份，
因此 <Nav> <NavItem> 才会被放在 <Collapse> 的区块中。

• Navbar 折叠起来的样子
  

• Navbar 折叠起来点击 menu icon 後展开的样子
  

以上就是关於 Navbar 的架构拆解，
希望这样有帮助大家了解orz
明天的文章真的就要进入 useState 了啦~~~~~

附一下今日连结 → Day13.14 - Reactstrap (Navbar)

後记

今天选择比较早发文，
因为明天想要专心做别的事，
不想要心还悬着铁人赛还没发文的事QQ
祝我明天顺利QQ